LayUI 进度条

概述

进度条可应用于许多业务场景，如任务完成进度、loading等等，是一种较为直观的表达元素。

官网：https://www.layui.com/doc/element/progress.html

使用

进度条的实现原理就是 大Div 包裹 小Div

主要使用的类：

• class="layui-progress" 大 Div
• class="layui-progress-bar" 小 Div

  默认风格

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

<script>
    //注意进度条依赖 element 模块，否则无法进行正常渲染和功能性操作
    layui.use(['element'], function(){
    });
</script>

不同颜色

官方是提供了这几种颜色，可以自己定义

颜色是定义在小 Div 里面

<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>

<script>
    //注意进度条依赖 element 模块，否则无法进行正常渲染和功能性操作
    layui.use(['element'], function(){
    });
</script>

大尺寸进度条

只用类：class="layui-progress layui-progress-big"

<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>

显示文本的进度条

大 Div 需要加入值 lay-showpercent="true"

<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 新增）
<br>
大进度条文字显示在进度条内，小进度条在外面

<script>
    //注意进度条依赖 element 模块，否则无法进行正常渲染和功能性操作
    layui.use(['element'], function(){
    });
</script>

动态进度条 请查看官网