layui進度條組件使用簡介

引入組件

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