进度条

html:

<div class="con">
     loading...<progress max="100" value="0"></progress><span>0</span>%
</div>
<figure>
     <img src="img/120.gif">
</figure>

css:

  .con { width: 500px; height: 40px; line-height: 40px; text-align:center; border:1px solid #ccc; margin: 100px auto; }
  figure { margin: 100px auto; width: 360px; height: 100px; display: none; }

jq:

$(function(){
    //定时器 得数字自加
     var timer01 = null;
     var num = 0;
     timer01 = setInterval(function(){
      //每隔30毫秒 就要num++ 直到100为止
      num++;
      //如果num的值大于100了 我们要停止定时器 并且让从隐藏 让img显示
      if(num >100){
           clearInterval(timer01);
           timer01 = null;
           $('.con').hide();
           $('figure').show();
      }
           $('.con progress').val(num);
           $('.con span').html(num);
   },30);
});