layui进度条 - 页面元素

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

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

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

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

显示进度比文本

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

<div class="layui-progress" lay-showPercent="true">
  <div class="layui-progress-bar layui-bg-red" lay-percent="1/3"></div>
</div>
       
<div class="layui-progress" lay-showPercent="yes">
  <div class="layui-progress-bar layui-bg-red" lay-percent="30%"></div>
</div>
 
<div class="layui-progress layui-progress-big" lay-showPercent="yes">
  <div class="layui-progress-bar layui-bg-green" lay-percent="50%"></div>
</div>

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

大号进度条

如果短小细长的它不大适合追求激情与视觉冲击的你，那么你完全可以选择大而粗，尽情地销魂于活塞运动。研究表明：上述尺寸刚刚好。

<div class="layui-progress layui-progress-big">
  <div class="layui-progress-bar" lay-percent="20%"></div>
</div>
 
<div class="layui-progress layui-progress-big">
  <div class="layui-progress-bar layui-bg-orange" lay-percent="50%"></div>
</div>
 
<div class="layui-progress layui-progress-big" lay-showPercent="true">
  <div class="layui-progress-bar layui-bg-blue" lay-percent="80%"></div>
</div>

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

进度条的全部代码如下：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>layui</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="//res.layui.com/layui/dist/css/layui.css"  media="all">
  <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>
              
<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>
  
<br>
温馨提示：进度条的宽度是100%适配于它的父级元素，如上面的进度条是在一个300px的父容器中。
 
<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>
 
<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>
 
<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>
 
<br>
正如你上述看到的，除了百分数，还支持分数（layui 2.1.7 新增）
 
<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>
 
<!-- 示例-970 -->
<ins class="adsbygoogle" style="display:inline-block;width:970px;height:90px" data-ad-client="ca-pub-6111334333458862" data-ad-slot="3820120620"></ins>
  
 
          
<script src="//res.layui.com/layui/dist/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<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>

</body>
</html>

layui进度条 - 页面元素

猜你喜欢