怎么使用JS和CSS實(shí)現(xiàn)加載進(jìn)度條的效果

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

準(zhǔn)備

軟件：HBuilderX。

實(shí)現(xiàn)

1. body 創(chuàng)建2個(gè)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)建兩個(gè)按鈕，添加點(diǎn)擊事件。

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

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

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

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

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

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

function stop() { clearInterval(t); }

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

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