Javascript 如何在进度条百分比中添加菱形标记？

我想在下面加上菱形标记来表示百分比

我无法添加它。由于进度条的颜色也应该改变，例如，如果它是70%，那么它应该是绿色的，其余的30%应该是红色的

<style type="text/css">
    .progress-wrapper {
      background: white;
      width: 100%;
      height: 18px;
      text-align: center;
      position: relative;
      overflow: hidden;
    }

    .progress {
      height: 100%;
      width: 60%;
      position: absolute;
      left: 0px;
      top: 0px;
      background: #63ed63;
    }

    .progress-label {
      position: absolute;
      z-index: 1;
    }

  </style>

  <div class="progress-wrapper"><div class="progress" style="width:80%"></div><label class="progress-label">80 per cent<label></div>

.进度包装器{
背景：白色；
宽度：100%；
高度：18px；
文本对齐：居中；
位置：相对位置；
溢出：隐藏；
}
.进展{
身高：100%；
宽度：60%；
位置：绝对位置；
左：0px；
顶部：0px；
背景：#63ed63；
}
.进度标签{
位置：绝对位置；
z指数：1；
}
80%

下面是一个使用setInterval的非常基本的版本：

var bar=document.getElementById（“bar”）；
var diamond=document.getElementById（“菱形包装”）；
函数init（）{
var循环=设置间隔（第15帧）；
风险值百分比=0；
函数框架（）{
如果（百分比>=100）{
清除间隔（循环）；
}否则{
百分比++；
updateProgressDOM（百分比）；
}
}
}
函数onProgressInputChange（事件）{
var百分比=event.currentTarget.value；
百分比=百分比<0？0：百分比>100？100：百分比；
updateProgressDOM（百分比）；
}
函数updateProgressDOM（百分比）{
bar.style.width=百分比+'%'；
document.querySelector（'.bar text'）。innerHTML=percentage*1+'%；
}

。进度{
宽度：100%；
位置：相对位置；
背景色：红色；
}
.酒吧{
位置：相对位置；
宽度：0%；
高度：20px；
背景颜色：绿色；
文本对齐：居中；
线高：20px；
颜色：黑色；
}
.bar文本{
位置：绝对位置；
排名：0；
宽度：100%；
高度：20px；
文本对齐：居中；
线高：20px；
颜色：黑色；
}
#钻石包装{
位置：绝对位置；
排名：0；
右：-10px；
}
戴蒙德先生{
宽度：0；
身高：0；
边框：10px实心透明；
边框底色：浅蓝色；
位置：相对位置；
顶部：-10px；
}
戴蒙德：之后{
内容：''；
位置：绝对位置；
左：-10px；
顶部：10px；
宽度：0；
身高：0；
边框：10px实心透明；
边框顶部颜色：浅蓝色；
}
输入{
宽度：200px；
}

初始进度

如何根据%？静态是什么意思？你的意思是在钻石标记内显示百分比吗？不，如果我必须标记70%为完成，30%为待定，那么低于70的钻石应该是there@Geeky我添加了一个自定义处理程序来使用HTML输入设置进度。希望这有帮助。如果这满足你的条件考虑投票。如果您还需要什么，请告诉我。没有占位符，我们不能这样做吗？实际上，我只想用硬编码的数据来做这件事。