进度条.gif
html
<div class="container" id="container">
<div class="time" id="bar" style="width:0%;"></div>
</div>
css
.container{
width: 400px;
height: 20px;
margin: 0 auto;
margin-top: 100px;
border:2px solid #388bfb;
line-height: 20px;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
overflow: hidden;
}
.time{
background: #85B9FF;
height: 100%;
text-align: center;
transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
color: #fff;
}
js
function load(){
var bar = document.getElementById("bar");
bar.style.width = parseInt(bar.style.width) +1 +"%";
bar.innerHTML = bar.style.width;
if(bar.style.width == "99%"){
window.clearTomeout(jindu);
return;
}
var jindu = setTimeout("load()",100);
}
window.onload = function(){
load();
}
