[[396481]]

大家好，我是前端進階者，今天給大家來做個小項目，一起來看看吧~

一、前言

我們經常在網頁上 ，游戲界面加載時會看到加載進度條的效果，我們往往會以為這些加載進度條的效果，很難實現。

今天教大家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寬度按照百分比來實現百分比進度條效果，大家可以將背景美化、邊框美化實現自己需要的漂亮美化的進度條效果。

代碼很簡單，希望對你有所啟發。

本文轉載自微信公眾號「前端進階學習交流」，可以通過以下二維碼關注。轉載本文請聯系前端進階學習交流公眾號。