一篇文章教會你使用JS+CSS實現(xiàn)一個簡單加載進度條的效果

回復“前端”即可獲贈前端相關學習資料

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

一、前言

我們經(jīng)常在網(wǎng)頁上 ，游戲界面加載時會看到加載進度條的效果，我們往往會以為這些加載進度條的效果，很難實現(xiàn)。

今天教大家JS+CSS結合做簡單一個加載進度條的效果。

二、項目準備

軟件：HBuilderX。

三、項目實現(xiàn)

1. body 創(chuàng)建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. 設置 創(chuàng)建兩個按鈕，添加點擊事件。

<button onclick="start()">開始進度</button><button onclick="stop()">結束進度</button>

5.start()方法，添加定時器。

function start() {t = setInterval(progress, 60);}

6.判斷當進度條到100%時，停止定時器，沒有到達，再執(zhí)行方法。

function progress() {if (i < 100) {i++;bar.style.width = i + "%";bar.innerHTML = i + " %";} else {clearInterval(t);}}

7. 設置stop（）方法，移除定時器， 停止執(zhí)行。

function stop() {clearInterval(t);}

8. 調(diào)用方法，實現(xiàn)效果。

四、效果展示

1、f12運行到chrome瀏覽器。

2、點擊開始進度按鈕，加載進度。顯示進度加載情況。

3、加載到100% 停止定時器！

4、按鈕結束進度按鈕，停止定時器。直接從當前進度停止。

五、總結

1. 本項目，事件監(jiān)聽遇到的一些難點進行了分析及提供解決方案。

2. 歡迎大家積極嘗試，有時候看到別人實現(xiàn)起來很簡單，但是到自己動手實現(xiàn)的時候，總會有各種各樣的問題，切勿眼高手低，勤動手，才可以理解的更加深刻。

3. HTML+CSS也可以做出網(wǎng)站頁面的效果，在上面顯示圖片標題的地方不能用絕對定位，于是用的relative定位，這個地方是布局的核心部分，否則無法將文字放在圖片之上。

4. 此進度條是DIV+CSS制作實現(xiàn)，通過對DIV寬度按照百分比來實現(xiàn)百分比進度條效果，大家可以將背景美化、邊框美化實現(xiàn)自己需要的漂亮美化的進度條效果。

5. 代碼很簡單，希望對你有所啟發(fā)。

------------------- End -------------------

往期精彩文章推薦：

• 一篇文章帶你了解JavaScript switch
  

• 一篇文章帶你了解JavaScript字符串
  

• 一篇文章帶你了解JavaScript隨機數(shù)