Javascript 如何创建（或至少描述）带有阈值的水平进度条？

我希望创建一个水平图表，其中包含特定百分比的阈值-如果您曾经使用过Battle.Net，类似于他们的下载栏：

我肯定它有个名字，我只是不知道它是什么

---

谢谢

我做这个只是为了以防万一。玩得开心。 您可以编辑小阈值指针，使它们看起来与css时尚。但这完全取决于你想做什么

//顺便说一句，我非常喜欢canvas元素，这就是为什么我要这么做。否则，也可以使用进度条
var c=document.getElementById（'progressBar'），
dt=document.getElementById（'download-text'），
btn=document.querySelector（'button'），
p2=document.querySelector（“进度”）；
var cx=c.getContext（'2d'）；
变量计数器=0，
环
btn.onclick=函数（）{
btn.innerText='N'；
var timeInter=setInterval（函数（）{
btn.innerText+='o'；
},70);
setTimeout（函数（）{
clearTimeout（timeInter）；
btn.hidden=true；
p2.hidden=false；
progress2（）；
},1000);
}
var loop2=“”，
计数器2=0；
函数progress2（）{
计数器2++；
风险值百分比=（2/17）。toFixed（2）；
如果（百分比-0>=100）{
百分比=100；
}
p2.value=百分比-0+''；
如果（百分比-0>100）{
取消动画帧（loop2）；
}否则{
loop2=requestAnimationFrame（进度）；
}
//这是我未能设置进度条动画的原因
}
功能进展（）{
计数器++；
风险值百分比=（计数器/17）.toFixed（2）；
如果（百分比>=100）{
百分比=100+'.00'；
}
dt.innerText=“下载：”+百分比+“%”；
cx.fillStyle='#00FFFF'；
cx.fillRect（0，0，c.宽度*百分比/100，c.高度）；
cx.strokeStyle='#ccc'；
cx.beginPath（）；
cx.moveTo（100,70）；
cx.lineTo（100,0）；
cx.stroke（）；
cx.moveTo（300,70）；
cx.lineTo（300,0）；
cx.stroke（）；
如果（百分比-0>100）{
取消动画帧（循环）；
}否则{
循环=requestAnimationFrame（进度）；
}
}
进步（）
#进度条{
边框：1px纯灰；
z指数：-10；
}
#progressBar，
#下载文本，
#可玩，
#最佳，
按钮
进展{
位置：绝对位置；
顶部：0px；
左：0px；
}
按钮
进展{
顶部：200px；
}
#下载文本{
高度：70像素；
填充顶部：25px；
左侧填充：7px；
字体系列：无衬线；
背景色：透明；
}
#可玩，
#最佳的{
宽度：100px；
高度：43px；
文本对齐：居中；
填充顶部：20px；
字体系列：无衬线；
字体大小：粗体；
}
#可玩{
背景颜色：黄色；
位置：绝对位置；
顶部：72px；
左：100px；
}
#最佳的{
背景颜色：绿色；
位置：绝对位置；
顶部：72px；
左：300px；
}

你好
可玩
最优的
请不要逼我，就贴在画布上