html+css+js 快速打造进度条

html进度条在web播放器中很常见，之前html并没有进度条这个标签,html5后出了一个progress标签作为进度条,但是并不是很好用，那么接下来，我们将用css+html+js实现进度条效果,无需任何三方框架。

1.新建一个html文件:加入两个div作为进度条

2.给进度条加样式

运行后看到效果:

3.通过js让进度条动起来,因为html宽高可以用百分比，所以做进度条就方便了,直接改变进度条的width值就可以了，下面使用js定时器来模拟进度条变化。将进度条原来的宽带设置为0，因为进度条一开始默认都是0嘛,然后加入js代码:

4.运行测试:运行效果如下

说明:这里只是介绍怎么做一个进度条，所以随便搞个样式，至于美化就通过css来设置，比如圆角、渐变等。

5.完整代码:

总结:关于html+css+js实现进度条就完成了，是不是很简单？在写播放器的时候就可以派上用场了哦。喜欢我的文章记得关注我哦，喜欢就送一个️给我吧，一起学习，一起成长!