css3彩色进度条
<html>
<head>
<title>progress</title>
<script type="text/javascript"
src="../jQuery1.7.js"></script>
<style type="text/css">
body{
margin: 0;
width:
100%;
height: 100%;
background: #333;
}
#wrapper{
height: 6px;
width: 600px;
position:
absolute;
top: 50%;
left: 50%;
margin-top:
-3px;
margin-left: -300px;
background-color: transparent;
background-image:
-webkit-linear-gradient(top,#000,#212121);
background-image:
-moz-linear-gradient(top,#000,#212121);
background-image:
-ms-linear-gradient(top,#000,#212121);
background-image:
linear-gradient(top,#000,#212121);
box-shadow: inset 0 -2px 2px
rgba(0,0,0,0.4);
border-radius: 3px 0 0 3px;
}
.loader-container{
height: 6px;
width:
600px;
position: absolute;
top: 50%;
left: 50%;
margin-top:
-3px;
margin-left: -300px;
background-color: transparent;
background-image:
-webkit-linear-gradient(left,#5bd8ff,#ff0000);
background-image:
-moz-linear-gradient(left,#5bd8ff,#ff0000);
background-image:
-ms-linear-gradient(left,#5bd8ff,#ff0000);
background-image:
linear-gradient(left,#5bd8ff,#ff0000);
box-shadow: inset 0 -2px 2px
rgba(0,0,0,0.4);
border-radius: 3px 0 0 3px;
}
.loader-container:after{
content:
"";
display: block;
position: absolute;
right: 0;
top:
50%;
width: 1em;
height: 1em;
border-radius: 50%;
margin-top:
-0.5em;
margin-right: -1em;
background-image:
-webkit-linear-gradient(top,#000,#212121);
background-image:
-moz-linear-gradient(top,#000,#212121);
background-image:
-ms-linear-gradient(top,#000,#212121);
background-image:
linear-gradient(top,#000,#212121);
}
.loader-container.done:after {
background: Red;
}
.run .runner {
content: "";
position: absolute;
right: 0;
height: 100%;
width: 0%;
overflow:
hidden;
background-color: transparent;
background-image: -webkit-linear-gradient(top,
#000000, #212121);
background-image: -moz-linear-gradient(top, #000000,
#212121);
background-image: -o-linear-gradient(top, #000000, #212121);
background-image:
-ms-linear-gradient(top, #000000, #212121);
background-image: linear-gradient(top, #000000,
#212121);
-webkit-animation: loader 10s linear;
}
.meter {
position: absolute;
top: 0;
right: 0;
font-size: 2em;
margin-top:
.3em;
color:
#ff0000;
animation: meter 10s linear;
text-shadow: 0 -1px 0 #333333;
}
.meter:after {
content: "%";
}
@-webkit-keyframes loader{
0%{
width: 100%;
}
100%{
width:
0%;
}
}
</style>
</head>
<body>
<div id="wrapper">
<div
class="loader-container">
<div
class="meter">0</div>
<span
class="runner"></span>
</div>
</div>
<script
type="text/javascript">
var Loader = function () {
var loader =
document.querySelector(‘.loader-container‘),
meter =
document.querySelector(‘.meter‘),
k, i =
1,
counter = function ()
{
if (i <= 100) {
meter.innerHTML =
i.toString();
i++;
} else {
window.clearInterval(k);
}
};
return
{
init: function (options)
{
options =
options || {};
var time =
options.time ? options.time : 0,
interval = time/100;
loader.classList.add(‘run‘);
k = window.setInterval(counter,
interval);
setTimeout(function () {
loader.classList.add(‘done‘);
}, time);
},
}
}();
Loader.init({
// If you have changed the @time in
LESS, update this number to the corresponding value. Measured in
miliseconds.
time: 10000
});
</script>
</body>
</html>
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
