进度条 jq

本文介绍简单的进度条的写法
css部分：

 <style>
        #progress {  background:white;height:20px;border:1px solid green;border-radius: 2px;  }
        #progress span {  height:20px;background:green;text-align:center;display:block;  color:#fff; width:0%;  }
</style>

html部分

这里写代码片<div id="progress"><span></span></div>

jq部分

<script>
  var m=0;
  var time=setInterval(function(){
      m++;
      $("#progress span").css("width",m+"%"); //进度条宽度代码
      $("#progress span").text(Math.round(m)+"%");//进度条文本 
      if(m>=100){
          clearInterval(time); //停止计时器
      }},500); //每500毫秒进行一次计时

</script>