最新赞助活动温馨提示:自愿赞助服务器费用,学生和没有工作的整站资源免费下载!
头像

jQuery仿游戏加载进度条

来源:http://www.erdangjiade.com/ 沐浴春风 2015-08-20 15:19浏览(1780)

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

0、请不要问“在不在”之类的问题,有问题直接问!1、学生或暂时没有工作的童鞋,整站资源免费下载!2、¥9.9充值终身VIP会员,加我微信,826096331 拉你进VIP群学习!3、程序员加油,技术改变世界。在线 充值

jQuery仿游戏加载进度条
分类:css3 > 进度条 难易:中级
查看演示 下载资源 下载积分: 30 积分

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(); 
});
声明:本文为原创文章,如需转载,请注明来源erdangjiade.com并保留原文链接:https://www.erdangjiade.com/js/416.html
评论1
头像

友情提示:垃圾评论一律封号 加我微信:826096331拉你进VIP群学习群

  • 头像 沙发
    12-14 08:27
    ngu137
    不错的读条啊啊啊。。。。。
1 2