进度条可应用于许多业务场景,如任务完成进度、loading等等,是一种较为直观的表达元素。
依赖加载组件:element
进度条的宽度是100%适配于它的父级元素,可以将父级元素设置宽度进行进度条的宽度控制。
进度条提供了两种尺寸及多种颜色的显示风格,其中颜色的选值可参考:背景色公共类。
属性lay-percent:代表进度条的初始百分比,也可以动态改变进度,详见:进度条的动态操作。
当对元素设置了class为layui-progress-big时,即为大尺寸的进度条风格。默认风格的进度条的百分比如果开启,会在右上角显示, 而大号进度条会在内部显示。
通过对父级元素设置属性lay-showPercent="yes"来开启进度比的文本显示,支持:普通数字、百分数、分数
注意:默认情况下不会显示百分比文本,如果想要开启,对属性lay-showPercent设置任意值即可,如yes. 但如果不想显示,千万别设置no或者false,直接删除即可。
当对元素设置了class="layui-progress-big"时,即是大尺寸进度条。
默认风格的进度条如果设置了显示进度,会在右上角显示,而大号进度条会在内部显示进度条的进度。