如何使用JS+CSS實現一個簡單加載進度條的效果

這篇文章主要講解了“如何使用JS+CSS實現一個簡單加載進度條的效果”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“如何使用JS+CSS實現一個簡單加載進度條的效果”吧！

一、前言

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

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

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

感謝各位的閱讀，以上就是“如何使用JS+CSS實現一個簡單加載進度條的效果”的內容了，經過本文的學習后，相信大家對如何使用JS+CSS實現一個簡單加載進度條的效果這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！