作者：前端進階者來源：前端進階學習交流
一、前言
我們經常在網頁上 ，游戲界面加載時會看到加載進度條的效果，我們往往會以為這些加載進度條的效果，很難實現。
今天教大家JS+css結合做簡單一個加載進度條的效果。
二、項目準備
軟件：HBuilderX。
三、項目實現
1. body 創建2個div，外部div添加id"progress"屬性， 添加 id屬性 。
<div id="progress">
<div id="progress-bar"></div>
</div>
2.設置progress CSS樣式。
設置寬度，高度，邊框圓角，超過溢出處理，邊框顏色等等屬性。
#progress {
width: 100%;
height: 30px;
position: relative;
background-color: #ddd;
border-radius: 10px;
overflow: hidden;
}
3.設置progress-bar CSS樣式。
設置寬度，高度，行高，文字顏色，背景顏色等等屬性。
#progress-bar {
background-color: #d9534f;
width: 10px;
height: 30px;
line-height: 30px;
position: absolute;
text-align: center;
color: white;
background-image: linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
background-size: 40px 40px;
}
4. 設置 創建兩個按鈕，添加點擊事件。
<button onclick="start()">開始進度</button>
<button onclick="stop()">結束進度</button>
5.start()方法，添加定時器。
function start() {
t = setInterval(progress, 60);
}
6.判斷當進度條到100%時，停止定時器，沒有到達，再執行方法。
function progress() {
if (i < 100) {
i++;
bar.style.width = i + "%";
bar.innerhtml = i + " %";
} else {
clearInterval(t);
}
}
7. 設置stop()方法，移除定時器， 停止執行。
function stop() {
clearInterval(t);
}
8. 調用方法，實現效果。
四、效果展示
1、f12運行到chrome瀏覽器。
2、點擊開始進度按鈕，加載進度。顯示進度加載情況。
3、加載到100% 停止定時器!
4、按鈕結束進度按鈕，停止定時器。直接從當前進度停止。
五、總結
- 本項目，事件監聽遇到的一些難點進行了分析及提供解決方案。
- 歡迎大家積極嘗試，有時候看到別人實現起來很簡單，但是到自己動手實現的時候，總會有各種各樣的問題，切勿眼高手低，勤動手，才可以理解的更加深刻。
- HTML+CSS也可以做出網站頁面的效果，在上面顯示圖片標題的地方不能用絕對定位，于是用的relative定位，這個地方是布局的核心部分，否則無法將文字放在圖片之上。
- 此進度條是DIV+CSS制作實現，通過對DIV寬度按照百分比來實現百分比進度條效果，大家可以將背景美化、邊框美化實現自己需要的漂亮美化的進度條效果。
- 代碼很簡單，希望對你有所啟發。
