jquery进度条动态加载
文章描述：
jQuery动态改变进度条效果与值
jquery进度条动态加载,所需要progress.js
GitHub地址：https://github.com/usablica/progress.js
前端样式我们使用bootstrap进度条样式来美化
<div class="container">
<h2>多种颜色的进度条</h2>
<h3></h3>
<p>Bootstrap4 提供了以下几种进度条颜色:</p>
<div class="progress">
<div class="progress-bar h-100P bar" style="" id="progressBar"></div>
</div>
<div class="progress">
<div class="progress-bar bg-success" style="width:40%"></div>
</div>
<div class="progress">
<div class="progress-bar bg-info" style="" data-w="20%"></div>
</div>
<div class="progress">
<div class="progress-bar bg-warning" style="width:60%"></div>
</div>
<div class="progress">
<div class="progress-bar bg-danger" style="width:70%"></div>
</div>
</div>$(function () {
//第一个进度条效果
var percentage = 0;
var interval = setInterval(function () {
if (percentage < 10000) {
percentage++;
var widthTemp = (percentage / 100).toFixed(1) + '%';
$('#progressBar').css('width', widthTemp);
$('#progressBar').text(widthTemp);
} else {
clearInterval(interval);
$('h3').text('加载完成！...');
setTimeout(function () {
location = '';
return false;
}, 1500);
}
}, 1);
});
//第二个进度条效果
var p_bar_data = $(".progress .progress-bar").eq(2).attr('data-w');
var str = p_bar_data.replace("%", "");
str = str / 100;
var bar_width = (10000 * str);
console.log(bar_width);
var percentage = 0;
var interval = setInterval(function () {
if (percentage < 10000) {
percentage++;
var widthTemp = (percentage / 100).toFixed(1) + '%';
$('.progress .progress-bar').eq(2).css('width', widthTemp);
$('.progress .progress-bar').eq(2).text(widthTemp);
console.log(bar_width);
if (percentage == bar_width) {
clearInterval(interval);
return false;
}
} else {
clearInterval(interval);
$('h3').text('加载完成！...');
setTimeout(function () {
location = '';
return false;
}, 1500);
}
}, 1);
发布时间：2022/10/13
发表评论