js进度条

进度条.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();
}