文档地址:
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