1、使用
默认样式
(1). 首先要进行模块加载
<script type="text/javascript"> layui.use(['element'],function(){ var form =layui.form; var element = layui.element; }) </script>(2). 对一个
div添加class="layui-progress"，然后再内部再添加一个class="layui-progress-bar"的div即可。
lay-percent="10%":代表进度条的初始百分比。
代码：
<div class="layui-progress"> <div class="layui-progress-bar" lay-percent="10%"></div> </div>
2、其他属性
默认样式过于简单，我们可以对进度条进行调整颜色、尺寸、显示进度比例等操作。
显示进度条比例
通过对父级元素设置属性 lay-showPercent="yes"来开启进度比的文本显示，支持：普通数字、百分数、分数。
注意：默认情况下不会显示百分比文本，如果你想开启，对属性lay-showPercent设置任意值即可，如：yes、true等等。但如果不想显示，千万别设置no或者false，直接剔除该属性即可。<div class="layui-progress" lay-showPercent="true"> <div class="layui-progress-bar layui-bg-red" lay-percent="1/3"></div> </div>
更改颜色
对进度条添加class=" layui-bg-red"即可。
<div class="layui-progress" lay-showPercent="true"> <div class="layui-progress-bar layui-bg-red" lay-percent="50%"></div> </div>
大号进度条
通过对父级元素追加layui-progress-big类即可。
<div class="layui-progress layui-progress-big" lay-showPercent="true"> <div class="layui-progress-bar" lay-percent="80%"></div> </div>
-
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery.min.js" ></script>
<script type="text/javascript" src="layui/layui.js" ></script>
<link rel="stylesheet" href="layui/css/layui.css" />
<script type="text/javascript">
layui.use(['element'],function(){
var form =layui.form;
var element = layui.element;
})
</script>
</head>
<body>
<h1 style="margin: 20px 50px; text-align: center;">默认进度条</h1>
<div class="layui-progress">
<div class="layui-progress-bar" lay-percent="10%"></div>
</div>
<h1 style="margin: 20px 50px; text-align: center;">显示比例 黑色 分数</h1>
<div class="layui-progress" lay-showPercent="true">
<div class="layui-progress-bar layui-bg-black" lay-percent="1/3"></div>
</div>
<h1 style="margin: 20px 50px; text-align: center;">显示比例 红色 百分数</h1>
<div class="layui-progress" lay-showPercent="yes">
<div class="layui-progress-bar layui-bg-red" lay-percent="30%"></div>
</div>
<h1 style="margin: 20px 50px; text-align: center;">显示比例 绿色 整数 大个的</h1>
<div class="layui-progress layui-progress-big" lay-showPercent="yes">
<div class="layui-progress-bar layui-bg-green" lay-percent="500"></div>
</div>
<h1 style="margin: 20px 50px; text-align: center;">不显示比例 绿色 百分数 大个的</h1>
<div class="layui-progress layui-progress-big" >
<div class="layui-progress-bar layui-bg-green" lay-percent="50%"></div>
</div>
<h1 style="margin: 20px 50px; text-align: center;">不显示比例 草绿色 百分数 大个的</h1>
<div class="layui-progress layui-progress-big">
<div class="layui-progress-bar" lay-percent="20%"></div>
</div><br />
<h1 style="margin: 20px 50px; text-align: center;">显示比例 橙色色 百分数 大个的</h1>
<div class="layui-progress layui-progress-big"lay-showPercent="true">
<div class="layui-progress-bar layui-bg-orange" lay-percent="50%"></div>
</div><br />
<h1 style="margin: 20px 50px; text-align: center;">显示比例 蓝色 分数 大个的</h1>
<div class="layui-progress layui-progress-big" lay-showPercent="true">
<div class="layui-progress-bar layui-bg-blue" lay-percent="3/5"></div>
</div>
</body>
</html>
测试结果：
image.png
3、加点好玩的（动态操作）
进度条不光可以静态加载，也可以动态操作，本例中，添加了四个按钮，对其添加了click（）事件，通过点击不同的按钮来实现不同的效果。本例选择元素时用到了jQuery，请加载layui.js、layui.css时一并加载。
- attr（'属性名'）：获得属性值
element.progress('demo',a+10+'%')：官方提供的修改进度值的方法（进度条元素div需要lay-filter="demo"属性否则无效）。
*$('#p1').attr('lay-percent',a+10+'%')：使用过element.progress（）方法后一定要将lay-percent属性一并修改，否则进度条会增加，但是显示的值不会变动。var setIn = setInterval(function(){}, time(毫秒)）：这个函数是每间隔一段time长的时间便会执行function(){}方法（本例中每隔一秒时间便增加进度值，来模仿登录效果）。clearInterval(setIn):停止运行setInterval方法。var num = Math.random();:返回介于 0.0 ~ 1.0 之间的一个随机数。以此来模仿登录时无规律增加进度条。num=Math.floor(num*10)：将产生的小数变成1~10的整数。layer.msg('魔盒终于打开了，但是啥也没有！嘿嘿！', {icon: 6});:产生一个提示框。
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery.min.js" ></script>
<script type="text/javascript" src="layui/layui.js" ></script>
<link rel="stylesheet" href="layui/css/layui.css" />
<script type="text/javascript">
layui.use(['layer','element'],function(){
var layer =layui.layer;
var element = layui.element;
$(function(){
var setIn;
$('#btn_jia').click(function(){
var a=parseInt($('#p1').attr('lay-percent'));
if (a+10<100) {
element.progress('demo',a+10+'%');
$('#p1').attr('lay-percent',a+10+'%')
} else{
element.progress('demo','100%');
$('#p1').attr('lay-percent','100%')
}
})
$('#btn_jian').click(function(){
var a=parseInt($('#p1').attr('lay-percent'));
if (a-10>0) {
element.progress('demo',a-10+'%');
$('#p1').attr('lay-percent',a-10+'%')
} else{
element.progress('demo','0%');
$('#p1').attr('lay-percent','0%')
}
})
$('#btn_login').click(function(){
setIn = setInterval(function(){
var a=parseInt($('#p1').attr('lay-percent'));
var num = Math.random();
num=Math.floor(num*10)
if(a+num<100){
element.progress('demo',a+num +'%');
$('#p1').attr('lay-percent',a+num+'%')
}else{
element.progress('demo','100%');
$('#p1').attr('lay-percent','100%');
layer.msg('魔盒终于打开了，但是啥也没有！嘿嘿！', {icon: 6});
clearInterval(setIn);
}
return;
}, 1000);
})
$('#btn_stop').click(function(){
clearInterval(setIn)
})
})
})
</script>
</head>
<body>
<h1 style="text-align:center;margin-top: 100px;">生活本无趣，但别丢了有趣的心鸭！</h1>
<br />
<br />
<div class="layui-progress layui-progress-big" lay-showPercent="yes" lay-filter="demo">
<div class="layui-progress-bar" id="p1" lay-percent="0%"></div>
</div>
<br />
<br />
<div style="text-align:center">
<button class="layui-btn"id="btn_jia">涨点工资</button>
<button class="layui-btn"id="btn_jian">少点烦恼</button>
<button class="layui-btn"id="btn_login">开启魔盒</button>
<button class="layui-btn"id="btn_stop">休息一下</button>
</div>
</body>
</html>
测试效果：
- 点击涨点工资按键：进度值增加10%
- 点击少点烦恼按键：进度值减少10%
- 点击开启魔盒按键：进度值每隔一秒随机增加1~10%的进度值。
点击休息一下按键：进度值不在随机增加（类似于暂停）。
没开启的魔盒.png
开启中的魔盒.png
s开启成功魔盒.png
