【Layui】05 进度条 Progress

文档地址：

https://www.layui.com/doc/element/progress.html

演示案例：

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

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

【相关属性】

进度条容器属性：

用于作为容器承载内部的进度条

layui-progress

进度条属性：

进度条本体

layui-progress-bar

进度占比属性：

可以按百分比取值，也可以按具体分辨率取值

lay-percent="10%"

 

显示具体进度取值文本的属性：

需要在容器标签开启属性：

lay-showPercent="true"

然后layui会渲染上面lay-percent属性的值在进度条上面

 

设置颜色属性：

赤色：class="layui-bg-red"
橙色：class="layui-bg-orange"
墨绿：class="layui-bg-green"
藏青：class="layui-bg-cyan"
蓝色：class="layui-bg-blue"
雅黑：class="layui-bg-black"
银灰：class="layui-bg-gray"

把属性追加到进度条本体的类属性即可

 

加大属性：

layui-progress-big