进度条-页面元素

常规用法

进度条可应用于许多业务场景,如任务完成进度、loading等等,是一种较为直观的表达元素。

依赖加载组件:element

进度条的宽度是100%适配于它的父级元素,可以将父级元素设置宽度进行进度条的宽度控制。

进度条提供了两种尺寸及多种颜色的显示风格,其中颜色的选值可参考:背景色公共类。

属性lay-percent:代表进度条的初始百分比,也可以动态改变进度,详见:进度条的动态操作。

当对元素设置了class为layui-progress-big时,即为大尺寸的进度条风格。默认风格的进度条的百分比如果开启,会在右上角显示, 而大号进度条会在内部显示。

显示进度比文本

通过对父级元素设置属性lay-showPercent="yes"来开启进度比的文本显示,支持:普通数字、百分数、分数

注意:默认情况下不会显示百分比文本,如果想要开启,对属性lay-showPercent设置任意值即可,如yes. 但如果不想显示,千万别设置no或者false,直接删除即可。

大号进度条

当对元素设置了class="layui-progress-big"时,即是大尺寸进度条。

默认风格的进度条如果设置了显示进度,会在右上角显示,而大号进度条会在内部显示进度条的进度。

动态改变进度