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)
如果有帮助;请点赞