进度条

进度条 progress 可应用于许多业务场景,如任务完成进度、loading 等等。

示例

  

进度条宽度是 100% 适配于它的父级元素,如上面的进度条是在一个 300px 的父容器中。

进度条主题

  

大号进度条

通过对进度条容器追加 classNamelayui-progress-big 可设置大尺寸风格的进度条。

  

显示进度值

  

API

API 描述
var element = layui.element 获得 element 模块。
element.render('progress', filter) 进度条 progress 组件渲染。
element.progress(filter, percent) 设置进度值

渲染

element.render('progress', filter);

  • 参数 'progress' : 渲染进度条的固定值
  • 参数 filter : 对应进度条容器 lay-filter 的属性值或2.9.15+指定元素的 jQuery 对象

在元素加载完毕后,element 模块会自动对元素进行一次渲染。而当元素为动态插入时,需通过该方法完成初始化渲染。

<div id="test"></div>
<!-- import layui -->
<script>
layui.use(function(){
  var element = layui.element;
  var $ = layui.$;
  // 动态插入进度条元素
  $('#test').html(`
    <div class="layui-progress" lay-filter="demo-filter-progress">
      <div class="layui-progress-bar" lay-percent="30%"></div>
    </div>
  `);
  // 渲染进度条组件
  element.render('progress', 'demo-filter-progress');
});
</script>

属性

属性 描述
lay-percent 用于设置进度条的值,进度条内层容器属性。支持 百分比分数 形式。用法详见:#示例
lay-showpercent 是否显示进度值,进度条外层容器属性,默认不显示。用法详见:#示例

设置进度值

element.progress(filter, percent);

  • 参数 filter : 对应进度条容器 lay-filter 的属性值
  • 参数 'percent' : 进度条的值

该方法用于动态改变进度条的值。示例: