jQuery仿游戏加载进度条

今天分享一款酷炫的CSS进度条，加载进度达到一定百分比，背景会动态变化，你可以自定义颜色。

分类：css3 > 进度条难易：中级

查看演示下载资源下载积分： 20 积分

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();
});