【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