JS进度条特效

原创

于 2019-07-26 16:54:55 发布 · 1k 阅读

CC 4.0 BY-SA版权

文章标签：

在这里插入图片描述

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>

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

      *{
   
   
            margin: 0;
            padding: 0

200万优质内容无限畅学