今天分享一款酷炫的CSS进度条，加载进度达到一定百分比，背景会动态变化，你可以自定义颜色。
淘建站为您提供更多_css3_进度条_加载_进度条，在此特别感谢您对我们的支持与厚爱！
查看演示
演示不了，点击反馈
加入收藏
下载 402 次
下载资源
42 积分
特别说明：本站资源来自网友发布分享，仅供学习与参考，请勿用于商业用途，若有侵权请联系删除(272966172@qq.com)。
HTML
<div class="htmleaf-content">
<div class="progress">
<b class="progress__bar">
<span class="progress__text">
Progress: <em>0%</em>
</span>
</b>
</div>
</div>jQuery
var $progress = $('.progress'), $bar = $('.progress__bar'), $text = $('.progress__text'), percent = 0, update, resetColors, speed = 200, orange = 30, yellow = 55, green = 85, timer;
resetColors = function() {
$bar.removeClass('progress__bar--green').removeClass('progress__bar--yellow').removeClass('progress__bar--orange').removeClass('progress__bar--blue');
$progress.removeClass('progress--complete');
};
update = function() {
timer = setTimeout(function() {
percent += Math.random() * 1.8;
percent = parseFloat(percent.toFixed(1));
$text.find('em').text(percent + '%');
if (percent >= 100) {
percent = 100;
$progress.addClass('progress--complete');
$bar.addClass('progress__bar--blue');
$text.find('em').text('Complete');
} else {
if (percent >= green) {
$bar.addClass('progress__bar--green');
} else if (percent >= yellow) {
$bar.addClass('progress__bar--yellow');
} else if (percent >= orange) {
$bar.addClass('progress__bar--orange');
}
speed = Math.floor(Math.random() * 900);
update();
}
$bar.css({width: percent + '%'});
}, speed);
};
setTimeout(function() {
$progress.addClass('progress--active');
update();
}, 1000);
$(document).on('click', function(e) {
percent = 0;
clearTimeout(timer);
resetColors();
update();
});
