Layui之进度条

进度条

准备工作：
导入layui.js和layui.css

一、默认风格的进度条

1、默认的进度条风格是小的细的，且颜色为绿
2、进度条的宽度是100%适配于它的父级元素，如上面的进度条是在一个300px的父容器中。

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
  <legend>默认风格的进度条</legend>
</fieldset>
  
<div class="layui-progress">
  <div class="layui-progress-bar" lay-percent="40%"></div>
</div>
<div style="margin-top: 15px; width:300px">
  <div class="layui-progress">
    <div class="layui-progress-bar" lay-percent="70%"></div>
  </div>
</div>

效果：

二、不同颜色的进度条

1、进度条颜色可自由更改，在div内添加语法（layui-bg-想要更改的颜色）
2、进度百分比也可自由更改，在div内添加语法（lay-percent=“要更改百分比”）

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
  <legend>更多颜色选取</legend>
</fieldset>
 
<div class="layui-progress">
  <div class="layui-progress-bar layui-bg-red" lay-percent="20%"></div>
</div>
 
<br>
 
<div class="layui-progress">
  <div class="layui-progress-bar layui-bg-orange" lay-percent="30%"></div>
</div>
 
<br>
 
<div class="layui-progress">
  <div class="layui-progress-bar layui-bg-green" lay-percent="40%"></div>
</div>
 
<br>
 
<div class="layui-progress">
  <div class="layui-progress-bar layui-bg-blue" lay-percent="50%"></div>
</div>
 
<br>
 
<div class="layui-progress">
  <div class="layui-progress-bar layui-bg-cyan" lay-percent="60%"></div>
</div>

效果：

三、不同尺寸的进度条

1、想要不同尺寸的进度条，只需要在div内添加语法（layui-progress-big）
2、进度条百分比可更改

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
  <legend>大尺寸进度条</legend>
</fieldset>
<div class="layui-progress layui-progress-big">
  <div class="layui-progress-bar" lay-percent="20%"></div>
</div>
   
<br>
<div class="layui-progress layui-progress-big">
  <div class="layui-progress-bar layui-bg-green" lay-percent="35%"></div>
</div>
<br>
<div class="layui-progress layui-progress-big">
  <div class="layui-progress-bar layui-bg-cyan" lay-percent="75%"></div>
</div>

效果：

四、显示进度百分比进度条

1、进度可以自己调节（lay-percent="?"）支持输入的有普通数字、百分比、分数
2、如果不想显示进度的百分比，可以删掉（lay-showpercent）
3、默认风格进度百分比会在进度条上方显示，大尺寸进度条的百分比会在进度条内部显示

<fieldset class="layui-elem-field layui-field-title" style="margin: 50px 0 30px;">
  <legend>显示进度比文本</legend>
</fieldset>
<div class="layui-progress" lay-showpercent="true">
  <div class="layui-progress-bar" lay-percent="20%"></div>
</div>
 
<br>
 
<div class="layui-progress" lay-showpercent="true">
  <div class="layui-progress-bar" lay-percent="5 / 10"></div>
</div>
 
<br>
 
<div class="layui-progress layui-progress-big" lay-showpercent="true">
  <div class="layui-progress-bar" lay-percent="70%"></div>
</div>

效果：

五、动态改变进度

1、依赖方法进行

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
  <legend>动态改变进度</legend>
</fieldset>
 
<div class="layui-progress layui-progress-big" lay-showpercent="true" lay-filter="demo">
  <div class="layui-progress-bar layui-bg-red" lay-percent="0%"></div>
</div>
 
<div class="site-demo-button" style="margin-top: 20px; margin-bottom: 0;">
  <button class="layui-btn site-demo-active" data-type="setPercent">设置50%</button>
  <button class="layui-btn site-demo-active" data-type="loading">模拟loading</button>
</div>

以上需要用到的方法：

<script>
layui.use('element', function(){
  var $ = layui.jquery
  ,element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块
  
  //触发事件
  var active = {
    setPercent: function(){
      //设置50%进度
      element.progress('demo', '50%')
    }
    ,loading: function(othis){
      var DISABLED = 'layui-btn-disabled';
      if(othis.hasClass(DISABLED)) return;
    
      //模拟loading
      var n = 0, timer = setInterval(function(){
        n = n + Math.random()*10|0;  
        if(n>100){
          n = 100;
          clearInterval(timer);
          othis.removeClass(DISABLED);
        }
        element.progress('demo', n+'%');
      }, 300+Math.random()*1000);
      
      othis.addClass(DISABLED);
    }
  };
  
  $('.site-demo-active').on('click', function(){
    var othis = $(this), type = $(this).data('type');
    active[type] ? active[type].call(this, othis) : '';
  });
});
</script>

效果：

设置50%的效果：

模拟加载效果：
加载过程中按钮禁用