进度条

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

示例

  <div class="layui-progress">
  <div class="layui-progress-bar" lay-percent="30%"></div>
</div>
 
<hr class="ws-space-16">
 
<div style="width:300px">
  <div class="layui-progress">
    <div class="layui-progress-bar" lay-percent="50%"></div>
  </div>
</div>
<!-- import layui -->

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

进度条主题

  <div class="layui-progress">
  <div class="layui-progress-bar layui-bg-red" lay-percent="10%"></div>
</div>
 
<hr class="ws-space-16">
 
<div class="layui-progress">
  <div class="layui-progress-bar layui-bg-orange" lay-percent="30%"></div>
</div>
 
<hr class="ws-space-16">
 
<div class="layui-progress">
  <div class="layui-progress-bar layui-bg-primary" lay-percent="50%"></div>
</div>
 
<hr class="ws-space-16">
 
<div class="layui-progress">
  <div class="layui-progress-bar layui-bg-blue" lay-percent="60%"></div>
</div>
 
<hr class="ws-space-16">
 
<div class="layui-progress">
  <div class="layui-progress-bar" lay-percent="70%"></div>
</div>
<!-- import layui -->

大号进度条

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

  <div class="layui-progress layui-progress-big">
  <div class="layui-progress-bar" lay-percent="15%"></div>
</div>
 
<hr class="ws-space-16">
 
<div class="layui-progress layui-progress-big">
  <div class="layui-progress-bar layui-bg-orange" lay-percent="35%"></div>
</div>
 
<hr class="ws-space-16">
 
<div class="layui-progress layui-progress-big">
  <div class="layui-progress-bar layui-bg-blue" lay-percent="75%"></div>
</div>
<!-- import layui -->

显示进度值

  <div class="layui-progress" lay-showpercent="true">
  <div class="layui-progress-bar" lay-percent="30%"></div>
</div>
 
<hr class="ws-space-16">
 
<div class="layui-progress" lay-showpercent="true">
  <div class="layui-progress-bar" lay-percent="5 / 10"></div>
</div>
 
<hr class="ws-space-16">
 
<div class="layui-progress layui-progress-big" lay-showpercent="true">
  <div class="layui-progress-bar" lay-percent="70%"></div>
</div>
<!-- import layui -->

API

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

渲染

element.render('progress', filter);

参数 'progress' : 渲染进度条的固定值
参数 filter : 对应进度条容器 lay-filter 的属性值

在元素加载完毕后，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' : 进度条的值

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

  <div class="layui-progress layui-progress-big" lay-showPercent="true" lay-filter="demo-filter-progress">
  <div class="layui-progress-bar" lay-percent="0%"></div>
</div>
 
<hr class="ws-space-16">
 
<div class="layui-btn-container">
  <button class="layui-btn" lay-on="setPercent">设置 50%</button>
  <button class="layui-btn" lay-on="loading">模拟 loading</button>
</div>
<!-- import layui -->
<script>
layui.use(function(){
  var element = layui.element;
  var util = layui.util;
  
  // 普通事件
  util.on('lay-on', {
    // 设置进度值
    setPercent: function(){
      element.progress('demo-filter-progress', '50%'); // 设置 50% 的进度
    },
    // 模拟 loading
    loading: function(othis){
      var DISABLED = 'layui-btn-disabled';
      if(othis.hasClass(DISABLED)) return;
      var n = 0;
      var timer = setInterval(function(){
        n = n + Math.random()*10|0;  
        if(n>100){
          n = 100;
          clearInterval(timer);
          othis.removeClass(DISABLED);
        }
        element.progress('demo-filter-progress', n+'%');
      }, 300+Math.random()*1000);
      
      othis.addClass(DISABLED);
    }
  });
});
</script>