JS进度条特效

效果图

特效分析

HTML

1、外层大的div
2、灰色底条
3、灰色上有橙色进度条进度部分
4、橙色方条前面有一个小块
5、还有进度百分比

<div id="progress">
    <div id="bar">
        <div id="front"></div>
        <span></span>
    </div>
    <div id="Value">0%</div>
</div>

CSS

1、由于橙色进度条和拖动块，都在灰色条上，所以使用定位。设置好初始位置
2、灰色底条边框、橙色条边框、以及拖动块边框需要调整样式
3、当鼠标在拖动块上时，cursor为pointer

      *{
   
   
            margin: 0;
            padding: 0