@TOC
一、效果展示：
请添加图片描述
众所周知，进度条是一种烦人的东西╭(╯^╰)╮
它用于实时显示处理任务的速度，完成度，剩余未完成任务量的大小，和可能需要处理时间。下面来一起写一个进度条叭。
二、layui配置
首先在官网下载layui
将html文件如下图创建好
在这里插入图片描述
在html文件头中链接到layui
<head> <!--在html文件头中链接到layui--> <link rel="stylesheet" href="./layui/css/layui.css"> </head>
引入layui.js
<!--引入layui.js--> <script src="./layui/layui.js"></script>
三、完整源码及超详细注释
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="./layui/css/layui.css"> </head> <body> <!--动态进度条--> <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;"> <legend>正在加载，请稍后...</legend> </fieldset> <div class="layui-progress layui-progress-big" lay-showpercent="true" lay-filter="demo"> <div class="layui-progress-bar layui-bg-red" lay-percent="0%"></div> </div> <div class="site-demo-button" style="margin-top: 20px; margin-bottom: 0;"> <button class="layui-btn site-demo-active" data-type="loading">模拟loading</button> </div> </div> <!--引入layui.js--> <script src="./layui/layui.js"></script> <!--layui配置--> <script> //注意进度条依赖 element 模块，否则无法进行正常渲染和功能性操作 layui.use('element', function () { var $ = layui.jquery; //获取js var element = layui.element; //获取layui //active事件 var active = { loading: function (othis) {//当loading按钮被点击后 var DISABLED = 'layui-btn-disabled';//layui-btn-disabled表示禁止点击的按钮 othis.addClass(DISABLED);//将按钮设置为禁止点击状态 //模拟loading var n = 0,//n表示进度百分百，取0到100 timer = setInterval(function () {//设置一个定时器 n = n + Math.random() * 10 | 0;//Math.random() * 10 | 0表示随机选取一个0到10的整数 if (n > 100) {//当n大于100时，将n设置为100，结束定时器，并恢复按钮， n = 100; clearInterval(timer); othis.removeClass(DISABLED);//去掉禁止点击的限制 } element.progress('demo', n + '%');//每次n增加后，改变进度条，element.progress可以改变进度条的值 }, 300 + Math.random() * 1000);//表示本定时器是每隔300~1300ms之间执行一次function } }; $('.site-demo-active').on('click', function () {//抓取到模拟loading按钮，绑定click点击事件 var othis = $(this), type = $(this).data('type'); active[type] ? active[type].call(this, othis) : '';//如果按钮被点击，则触发active }); }); </script> </body> </html>
