功能描述：顧名思義，既是形象地用柱狀條長短變化表示進度變化過程的工具。如下圖：
實現
- 組成：單看進度條的組成，外層是一個父標簽，有一定長度，有邊框，便於表現總的進度大小；里層是一個子標簽，寬度為一定百分比的父標簽寬度，並且背景色填充，有文本內容，文本居右，有一定內邊距。
- 動畫：為子標簽設置一個輪詢器，當寬度達到父標簽寬度100%時，關閉輪詢器，並做自定義操作
代碼：
- HTML
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>我的進度條</title> 6 <link rel="stylesheet" type="text/css" href="progress.css"> 7 <script type="text/javascript" src="jquery-1.11.3.min.js"></script> 8 <script type="text/javascript" src="progress.js"></script> 9 </head> 10 <body> 11 <div class="flex-center"> 12 <h3>系統加載中，請稍等...</h3> 13 <span class="container"> 14 <span id="progressBar" class="h-100P bar"></span> 15 </span> 16 </div> 17 </body> 18 </html>
引用自己寫的CSS樣式文件，再引入Jquery的Js文件，和自己寫的JS文件。自己寫的JS文件依賴於JQuery文件。
- CSS
1 .flex-center{ 2 display: flex; 3 flex-direction: column; 4 align-items: center; 5 } 6 .container{ 7 display: inline-block; 8 width: 50%; 9 height: 20px; 10 padding-right: 10px; 11 border: 1px solid #999; 12 border-radius: 5px; 13 } 14 .h-100P{ 15 height: 100%; 16 } 17 .bar{ 18 display: inline-block; 19 background: #90bf46; 20 color: white; 21 font-weight: bold; 22 padding: 0 5px; 23 text-align: right; 24 border-radius: 5px; 25 border-right: 1px solid #999; 26 }
父標簽引用container樣式，子標簽引用bar樣式。
- JS
1 $(document).ready(function () { 2 var percentage = 0; 3 var interval = setInterval(function () { 4 if (percentage < 10000) { 5 percentage++; 6 var widthTemp = (percentage / 100).toFixed(1) + '%'; 7 $('#progressBar').css('width', widthTemp); 8 $('#progressBar').text(widthTemp); 9 } else { 10 clearInterval(interval); 11 $('h3').text('加載完成！正在為您跳轉...'); 12 setTimeout(function () { 13 location = 'helloWorld.html'; 14 }, 1500); 15 } 16 }, 10); 17 });
$(document).ready()方法初始化JS文件，JS代碼從這里開始執行。當percentage初始化為0，每10毫秒自加一次，自加10000次，既100000毫秒（100秒）后結束循環，循環時，實時改變子標簽的寬度，並更改顯示的文本內容。