怎么使用JS+CSS實現(xiàn)一個簡單加載進(jìn)度條的效果

這篇文章主要介紹“怎么使用JS+CSS實現(xiàn)一個簡單加載進(jìn)度條的效果”的相關(guān)知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強(qiáng)，希望這篇“怎么使用JS+CSS實現(xiàn)一個簡單加載進(jìn)度條的效果”文章能幫助大家解決問題。

一、前言

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

二、項目準(zhǔn)備

軟件：HBuilderX。

三、項目實現(xiàn)

1. body 創(chuàng)建2個div，外部div添加id"progress"屬性， 添加 id屬性 。

<div id="progress"> <div id="progress-bar"></div> </div>

2.設(shè)置progress CSS樣式。

設(shè)置寬度，高度，邊框圓角，超過溢出處理，邊框顏色等等屬性。

#progress { width: 100%; height: 30px; position: relative; background-color: #ddd; border-radius: 10px; overflow: hidden; }

3.設(shè)置progress-bar CSS樣式。

設(shè)置寬度，高度，行高，文字顏色，背景顏色等等屬性。

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

<button onclick="start()">開始進(jìn)度</button> <button onclick="stop()">結(jié)束進(jìn)度</button>

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

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

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

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

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

function stop() { clearInterval(t); }

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

四、效果展示

1、f12運行到chrome瀏覽器。

2、點擊開始進(jìn)度按鈕，加載進(jìn)度。顯示進(jìn)度加載情況。

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

4、按鈕結(jié)束進(jìn)度按鈕，停止定時器。直接從當(dāng)前進(jìn)度停止。

關(guān)于“怎么使用JS+CSS實現(xiàn)一個簡單加載進(jìn)度條的效果”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識，可以關(guān)注億速云行業(yè)資訊頻道，小編每天都會為大家更新不同的知識點。