进度条实现

<style type="text/css" media="screen">
#center{ 
margin:50px auto; 
width:400px; 
} 
#loading{ 
width:397px; 
height:49px; 
background:url(bak.png) no-repeat; 
color:#fff; 
text-align:center; 
font-family:Tahoma; 
font-size:18px; 
line-height:48px;
} 

.map{ 
    width:0px; 
    height:48px; 
    background:url(pro.png) no-repeat; 

} 


.text{
    /*margin:50px auto; */
    width:400px; 
    color:#000; 
    text-align:center; 
    font-family:Tahoma; 
    font-size:18px; 
    line-height:48px; 

}


</style>


<script type="text/javascript" src="jquery-1.11.1.min.js"></script> 
<script type="text/javascript"> 
        var i = 0; 
        function doProgress() 
        { 
                if (i > 100) { 
                $("#text").html("加载完毕！").fadeIn("slow");//加载完毕提示 
                return; 
                } 
                if (i <= 100) { 

                 $("#map").css("width", String(i) + "%"); //控制#loading div宽度 
                  $("#text").html(String(i) + "%"); //显示百分比 
                setTimeout("doProgress()", 100);
                i++; 
                 
                } 
        } 

              
$(document).ready(function() 
{ 
        doProgress(); 
}); 
</script> 


<div id="center"> 

<div align="center">
<span id="text" class="text"></span>
</div>

<div id="loading">
<div id="map" class="map"></div>
</div>


</div>

div 层叠：

  1 <style type="text/css" media="screen">
  2 #center{ 
  3 margin:50px auto; 
  4 width:400px; 
  5 } 
  6 #loading{ 
  7     position:relative;
  8 width:397px; 
  9 height:49px; 
 10 background:url(bak.png) no-repeat; 
 11 color:#fff; 
 12 text-align:center; 
 13 font-family:Tahoma; 
 14 font-size:18px; 
 15 line-height:48px;
 16 } 
 17 /*#loading div{ 
 18 0px; 
 19 height:48px; 
 20 background:url(pro.png) no-repeat; 
 21 color:#fff; 
 22 text-align:center; 
 23 font-family:Tahoma; 
 24 font-size:18px; 
 25 line-height:48px; 
 26 } */
 27 
 28 .map{ 
 29     position:absolute;
 30     width:0px; 
 31     height:48px; 
 32     background:url(pro.png) no-repeat; 
 33     /*color:#fff; 
 34     text-align:center; 
 35     font-family:Tahoma; 
 36     font-size:18px; 
 37     line-height:48px; */
 38 } 
 39 
 40 
 41 .text{
 42     /*margin:50px auto; */
 43     position:absolute;
 44     width:400px; 
 45     color:#000; 
 46     text-align:center; 
 47     font-family:Tahoma; 
 48     font-size:18px; 
 49     line-height:48px; 
 50 
 51 }
 52 
 53 #message{ 
 54 width:200px; 
 55 height:35px; 
 56 font-family:Tahoma; 
 57 font-size:12px; 
 58 background-color:#d8e7f0; 
 59 border:1px solid #187CBE; 
 60 display:none; 
 61 line-height:35px; 
 62 text-align:center; 
 63 margin-bottom:10px; 
 64 margin-left:50px; 
 65 }
 66 
 67 </style>
 68 
 69 
 70 <script type="text/javascript" src="jquery-1.11.1.min.js"></script> 
 71 <script type="text/javascript"> 
 72         var i = 0; 
 73         function doProgress() 
 74         { 
 75                 if (i > 100) { 
 76                 $("#text").html("加载完毕！").fadeIn("slow");//加载完毕提示 
 77                 return; 
 78                 } 
 79                 if (i <= 100) { 
 80 
 81                  $("#map").css("width", String(i) + "%"); //控制#loading div宽度 
 82                   $("#text").html(String(i) + "%"); //显示百分比 
 83                 setTimeout("doProgress()", 100);
 84                 i++; 
 85                  
 86                 } 
 87         } 
 88 
 89               
 90 $(document).ready(function() 
 91 { 
 92         doProgress(); 
 93 }); 
 94 </script> 
 95 
 96 
 97 <div id="center"> 
 98 
 99 
100 
101 <div id="loading" >
102 <div id="map" class="map"></div>
103 <div id="text" class="text"></div>
104 </div>
105 
106 
107 </div>

效果：

文件下载： https://files.cnblogs.com/files/hzijone/manu_processbar.zip