记录新的学习之LayUi-05progress进度条相关

 

 

<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>

<br>

<script>
    //注意进度条依赖 element 模块，否则无法进行正常渲染和功能性操作
    layui.use('element', function(){
        var element = layui.element;
    });
</script>

相关样式：

class="layui-progress 代表一个进度条

class="layui-progress-bar 代表进度条里面的进度

 

相关属性：lay-percent 代表进度

 

 

 

 相关样式:layui-bg-orange

 

<div class="layui-progress">
  <div class="layui-progress-bar layui-bg-orange" lay-percent="30%"></div>
</div>

 

 

 相关样式:layui-progress-big

 

<div class="layui-progress layui-progress-big">
    <div class="layui-progress-bar" lay-percent="20%"></div>
</div>

 

 

 显示进度条 相关属性:lay-showpercent="true"

 

<div class="layui-progress layui-progress-big" lay-showpercent="true">
    <div class="layui-progress-bar" lay-percent="20%"></div>
</div>