layui 的进度条（progress）

html

 <div class="layui-progress" lay-filter="loading" id="loading" style="width: 300px;margin: 30px auto ;">
        <div class="layui-progress-bar"></div>
    </div>

js

var isLoading = true
var active = {
    setPercent: function () {
        layui.element.progress('loading', '100%')
    }
    , loading: function (othis) {
        var DISABLED = 'layui-btn-disabled';
        if (othis.hasClass(DISABLED)) return;
        var n = 0, timer = setInterval(function () {
            n = n + getRandomIntInclusive(5, 10); // 设置进度条每次增加的长度
            function getRandomIntInclusive(min, max) {
                min = Math.ceil(min);
                max = Math.floor(max);
                return Math.floor(Math.random() * (max - min + 1)) + min; //含最大值，含最小值 
            }
            if (n > 95) {
                othis.removeClass(DISABLED);
            } else {
                layui.element.progress('loading', n + '%');
            }
            if (!isLoading) {
                n = 100
                clearInterval(timer);
                othis.removeClass(DISABLED);
                layui.element.progress('loading', n + '%');
            }
        }, 300 + Math.random() * 1000);
        othis.addClass(DISABLED);
    }
};
active.loading($('#loading'))
// 设置进度条进度100% 看实际应用
setTimeout(function () {
    isLoading = false
    active.setPercent()
}, 2000)

如果有帮助；请点赞