进度条
准备工作:
导入layui.js和layui.css
一、默认风格的进度条
1、默认的进度条风格是小的细的,且颜色为绿
2、进度条的宽度是100%适配于它的父级元素,如上面的进度条是在一个300px的父容器中。
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
<legend>默认风格的进度条</legend>
</fieldset>
<div class="layui-progress">
<div class="layui-progress-bar" lay-percent="40%"></div>
</div>
<div style="margin-top: 15px; width:300px">
<div class="layui-progress">
<div class="layui-progress-bar" lay-percent="70%"></div>
</div>
</div>
效果:
二、不同颜色的进度条
1、进度条颜色可自由更改,在div内添加语法(layui-bg-想要更改的颜色)
2、进度百分比也可自由更改,在div内添加语法(lay-percent=“要更改百分比”)
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
<legend>更多颜色选取</legend>
</fieldset>
<div class="layui-progress">
<div class="layui-progress-bar layui-bg-red" lay-percent="20%"></div>
</div>
<br>
<div class="layui-progress">
<div class="layui-progress-bar layui-bg-orange" lay-percent