一款基于jquery带百分比的响应式进度加载条
阅读：3297
时间：2018-02-01 03:25
今天要给大家带来一款基于jquery带百分比的响应式进度加载条。这款加载条非常漂亮，而且带有进度的百度比，且在不同的百分比用的是不同的颜色。而且这款加载条采用了响应式设计，在不同的分辨率的显示器下完美支持。一起看下效果图吧。
实现的代码。
html代码：
<h1>
Battle.net <b>style progress bar</b></h1>
<div class="progress">
<b class="progress__bar"><span class="progress__text">Progress: <em>0%</em> </span>
</b>
</div>
css代码：
.progress {
font-size: 1.2em;
height: 20px;
background: rgba(255, 255, 255, 0.05);
border-radius: 2px;
border: 1px solid rgba(255, 255, 255, 0.2);
}
.progress--active .progress__bar {
opacity: 1;
}
.progress__text {
width: 20em;
padding: 0 0.9em;
position: absolute;
}
.progress__text em {
font-style: normal;
}
.progress__bar {
color: white;
font-size: 12px;
font-weight: normal;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.6);
line-height: 19px;
display: block;
position: relative;
top: -1px;
left: -1px;
width: 0%;
height: 100%;
opacity: 0;
border: 1px solid;
border-radius: 2px 0 0 2px;
background-size: 100px 30px, 130px 30px, 130px 30px;
background-position: -20% center, right center, left center;
background-repeat: no-repeat, no-repeat, no-repeat;
-webkit-transition: opacity 0.2s ease, width 0.8s ease-out, background-color 1s ease, border-color 0.3s ease, box-shadow 1s ease;
transition: opacity 0.2s ease, width 0.8s ease-out, background-color 1s ease, border-color 0.3s ease, box-shadow 1s ease;
-webkit-animation: pulse 2s ease-out infinite;
animation: pulse 2s ease-out infinite;
background-color: rgba(201, 4, 20, 0.95);
background-image: -webkit-linear-gradient(0deg, rgba(226, 4, 22, 0) 10%, rgba(250, 6, 26, 0.8) 30%, #fb1f31 70%, rgba(250, 6, 26, 0.8) 80%, rgba(226, 4, 22, 0) 90%), -webkit-linear-gradient(left, rgba(251, 31, 49, 0) 0%, #fb1f31 100%), -webkit-linear-gradient(right, rgba(251, 31, 49, 0) 0%, #fb1f31 100%);
background-image: linear-gradient(90deg, rgba(226, 4, 22, 0) 10%, rgba(250, 6, 26, 0.8) 30%, #fb1f31 70%, rgba(250, 6, 26, 0.8) 80%, rgba(226, 4, 22, 0) 90%), linear-gradient(to right, rgba(251, 31, 49, 0) 0%, #fb1f31 100%), linear-gradient(to left, rgba(251, 31, 49, 0) 0%, #fb1f31 100%);
border-color: #fb3848;
box-shadow: 0 0 0.6em #fa061a inset, 0 0 0.4em #e20416 inset, 0 0 0.5em rgba(201, 4, 20, 0.5), 0 0 0.1em rgba(254, 206, 210, 0.5);
}
.progress__bar--orange {
background-color: rgba(201, 47, 0, 0.95);
background-image: -webkit-linear-gradient(0deg, rgba(227, 53, 0, 0) 10%, rgba(252, 59, 0, 0.8) 30%, #ff4d17 70%, rgba(252, 59, 0, 0.8) 80%, rgba(227, 53, 0, 0) 90%), -webkit-linear-gradient(left, rgba(255, 77, 23, 0) 0%, #ff4d17 100%), -webkit-linear-gradient(right, rgba(255, 77, 23, 0) 0%, #ff4d17 100%);
background-image: linear-gradient(90deg, rgba(227, 53, 0, 0) 10%, rgba(252, 59, 0, 0.8) 30%, #ff4d17 70%, rgba(252, 59, 0, 0.8) 80%, rgba(227, 53, 0, 0) 90%), linear-gradient(to right, rgba(255, 77, 23, 0) 0%, #ff4d17 100%), linear-gradient(to left, rgba(255, 77, 23, 0) 0%, #ff4d17 100%);
border-color: #ff6030;
box-shadow: 0 0 0.6em #fc3b00 inset, 0 0 0.4em #e33500 inset, 0 0 0.5em rgba(201, 47, 0, 0.5), 0 0 0.1em rgba(255, 214, 201, 0.5);
}
.progress__bar--yellow {
background-color: rgba(232, 158, 0, 0.95);
background-image: -webkit-linear-gradient(0deg, rgba(255, 174, 2, 0) 10%, rgba(255, 183, 28, 0.8) 30%, #ffbf36 70%, rgba(255, 183, 28, 0.8) 80%, rgba(255, 174, 2, 0) 90%), -webkit-linear-gradient(left, rgba(255, 191, 54, 0) 0%, #ffbf36 100%), -webkit-linear-gradient(right, rgba(255, 191, 54, 0) 0%, #ffbf36 100%);
background-image: linear-gradient(90deg, rgba(255, 174, 2, 0) 10%, rgba(255, 183, 28, 0.8) 30%, #ffbf36 70%, rgba(255, 183, 28, 0.8) 80%, rgba(255, 174, 2, 0) 90%), linear-gradient(to right, rgba(255, 191, 54, 0) 0%, #ffbf36 100%), linear-gradient(to left, rgba(255, 191, 54, 0) 0%, #ffbf36 100%);
border-color: #ffc74f;
box-shadow: 0 0 0.6em #ffb71c inset, 0 0 0.4em #ffae02 inset, 0 0 0.5em rgba(232, 158, 0, 0.5), 0 0 0.1em rgba(255, 248, 232, 0.5);
}
.progress__bar--green {
background-color: rgba(0, 178, 23, 0.95);
background-image: -webkit-linear-gradient(0deg, rgba(0, 203, 26, 0) 10%, rgba(0, 229, 30, 0.8) 30%, #00fe21 70%, rgba(0, 229, 30, 0.8) 80%, rgba(0, 203, 26, 0) 90%), -webkit-linear-gradient(left, rgba(0, 254, 33, 0) 0%, #00fe21 100%), -webkit-linear-gradient(right, rgba(0, 254, 33, 0) 0%, #00fe21 100%);
background-image: linear-gradient(90deg, rgba(0, 203, 26, 0) 10%, rgba(0, 229, 30, 0.8) 30%, #00fe21 70%, rgba(0, 229, 30, 0.8) 80%, rgba(0, 203, 26, 0) 90%), linear-gradient(to right, rgba(0, 254, 33, 0) 0%, #00fe21 100%), linear-gradient(to left, rgba(0, 254, 33, 0) 0%, #00fe21 100%);
border-color: #19ff37;
box-shadow: 0 0 0.6em #00e51e inset, 0 0 0.4em #00cb1a inset, 0 0 0.5em rgba(0, 178, 23, 0.5), 0 0 0.1em rgba(178, 255, 188, 0.5);
}
.progress__bar--blue {
background-color: rgba(18, 135, 204, 0.95);
background-image: -webkit-linear-gradient(0deg, rgba(20, 151, 227, 0) 10%, rgba(37, 162, 236, 0.8) 30%, #3dacee 70%, rgba(37, 162, 236, 0.8) 80%, rgba(20, 151, 227, 0) 90%), -webkit-linear-gradient(left, rgba(61, 172, 238, 0) 0%, #3dacee 100%), -webkit-linear-gradient(right, rgba(61, 172, 238, 0) 0%, #3dacee 100%);
background-image: linear-gradient(90deg, rgba(20, 151, 227, 0) 10%, rgba(37, 162, 236, 0.8) 30%, #3dacee 70%, rgba(37, 162, 236, 0.8) 80%, rgba(20, 151, 227, 0) 90%), linear-gradient(to right, rgba(61, 172, 238, 0) 0%, #3dacee 100%), linear-gradient(to left, rgba(61, 172, 238, 0) 0%, #3dacee 100%);
border-color: #54b6f0;
box-shadow: 0 0 0.6em #25a2ec inset, 0 0 0.4em #1497e3 inset, 0 0 0.5em rgba(18, 135, 204, 0.5), 0 0 0.1em rgba(225, 242, 252, 0.5);
}
.progress__bar:before, .progress__bar:after {
content: "";
position: absolute;
right: -1px;
top: -10px;
width: 1px;
height: 40px;
}
.progress__bar:before {
width: 7px;
right: -4px;
background: -webkit-radial-gradient(center, ellipse, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0) 75%);
background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0) 75%);
}
.progress__bar:after {
background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 25%, rgba(255, 255, 255, 0.3) 75%, rgba(255, 255, 255, 0) 100%);
background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 25%, rgba(255, 255, 255, 0.3) 75%, rgba(255, 255, 255, 0) 100%);
}
.progress--complete .progress__bar {
-webkit-animation: none;
animation: none;
border-radius: 2px;
}
.progress--complete .progress__bar:after, .progress--complete .progress__bar:before {
opacity: 0;
}
@-webkit-keyframes pulse {
0% {
background-position: -50% center, right center, left center;
}
100% {
background-position: 150% center, right center, left center;
}
}
@keyframes pulse {
0% {
background-position: -50% center, right center, left center;
}
100% {
background-position: 150% center, right center, left center;
}
}
body, html {
color: white;
padding: 20px 50px;
background: #131c23;
font-family: Roboto;
}
h1 {
font-weight: 900;
line-height: 1em;
margin: 0.5em 0;
}
h1 b {
font-weight: 100;
}
js代码：
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();
}); //@ sourceURL=pen.js
注：本文爱编程原创文章，转载请注明原文地址：http://www.w2bc.com/Article/7781
版权所有 爱编程 © Copyright 2012. All Rights Reserved.
闽ICP备12017094号-3
闽ICP备12017094号-3