搜索组件模块
grid 栅格布局
layout admin 布局
color 颜色
iconfont 字体图标
font 字体大小 颜色
animation 动画
button 按钮
form 表单组
input 输入框
select 下拉选择框
checkbox 复选框
switch 开关
radio 单选框
textarea 文本域
nav 导航菜单
menu 基础通用菜单
breadcrumb 面包屑
tabs 选项卡
progress 进度条
panel 面板 / card
collapse 折叠面板/手风琴
table 表格元素
badge 徽章
timeline 时间线
blockquote 引用块
fieldset 字段集
hr 分割线
layer 弹出层/弹窗综合
laydate 日期时间选择器
laypage 分页
laytpl 模板引擎
table 数据表格
form 表单模块
upload 文件/图片上传
dropdown 下拉菜单
contextmenu 右键菜单
transfer 穿梭框
tree 树形菜单
colorpicker 颜色选择器
element 常用元素操作
slider 滑块
rate 评分
carousel 轮播/跑马灯
layedit 富文本编辑器
flow 信息流/图片懒加载
util 工具集
code 代码文本行修饰
layim
layuiadmin
-

进度条 - 页面元素

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




我们进度条提供了两种尺寸及多种颜色的显示风格,其中颜色的选值可参考:背景色公共类。基本元素结构如下

HTML结构code

  1. <div class="layui-progress">
  2. <div class="layui-progress-bar" lay-percent="10%"></div>
  3. </div>
  4. <script>
  5. //注意进度条依赖 element 模块,否则无法进行正常渲染和功能性操作
  6. layui.use('element', function(){
  7. var element = layui.element;
  8. });
  9. </script>

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

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





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

HTML结构code

  1. <div class="layui-progress" lay-showPercent="true">
  2. <div class="layui-progress-bar layui-bg-red" lay-percent="1/3"></div>
  3. </div>
  4. <div class="layui-progress" lay-showPercent="yes">
  5. <div class="layui-progress-bar layui-bg-red" lay-percent="30%"></div>
  6. </div>
  7. <div class="layui-progress layui-progress-big" lay-showPercent="yes">
  8. <div class="layui-progress-bar layui-bg-green" lay-percent="50%"></div>
  9. </div>

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




和世界上许多客观存在的事物一样,进度条也不仅是只有短小细长的尺寸,当然也有大而粗,这是我们认为相对合适的大尺寸。

HTML结构code

  1. <div class="layui-progress layui-progress-big">
  2. <div class="layui-progress-bar" lay-percent="20%"></div>
  3. </div>
  4. <div class="layui-progress layui-progress-big">
  5. <div class="layui-progress-bar layui-bg-orange" lay-percent="50%"></div>
  6. </div>
  7. <div class="layui-progress layui-progress-big" lay-showPercent="true">
  8. <div class="layui-progress-bar layui-bg-blue" lay-percent="80%"></div>
  9. </div>

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

如果你需要对进度条进行动态操作,如动态改变进度,那么你需要阅读:element模块

layui - 在每一个细节中,用心与你沟通