在html页面开发中，我们有时会用到进度条，自己做一个进度条的控件也不是很难，但使用layui库里的进度条控件，很容易就可以实现出来了，下面我们就来看一下。
方法/步骤
1
我们先引入layui有js脚本文件和css样式文件。
2
然后在html里添加二个div，这二个div需要的样式名称如图所示，需要严格匹配这些样式。
3
最后需要在脚本里渲染一样layui的element组件，调用render方法就行。
4
运行html页面，我们就可以看到一个漂亮的进度条了。但这个是静态的进度条，不会变化的，html代码里设置了百分比是多少就显示多少。
6
然后在脚本里添加一个定时器，定时器方法里，调用element的progress方法来设置进度条的进度： element.progress('jy', n+'%'); 其中的第一个参数jy就是我们刚设置的lay-filter的值。
7
完善一下，当进度条的数值大于100时，就把定时器撤掉，停止添加数值。
8
再次运行页面，可以看到一个动态的进度条了。
上一篇：PPT制作进度条动画步骤