怎么使用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. 調用方法，實現效果。

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