Layui之进度条

进度条

准备工作：
导入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