作者：前端進階者來源：前端進階學習交流
我們經常在網頁上 ，遊戲界面加載時會看到加載進度條的效果，我們往往會以為這些加載進度條的效果，很難實作。
今天教大家js+css結合做簡單一個加載進度條的效果。
軟體：hbuilderx。
1. body 建立2個div，外部div添加id"progress"屬性， 添加 id屬性 。
2.設定progress css樣式。
設定寬度，高度，邊框圓角，超過溢出處理，邊框顔色等等屬性。
3.設定progress-bar css樣式。
設定寬度，高度，行高，文字顔色，背景顔色等等屬性。
4. 設定 建立兩個按鈕，添加點選事件。
5.start()方法，添加定時器。
6.判斷當進度條到100%時，停止定時器，沒有到達，再執行方法。
7. 設定stop()方法，移除定時器， 停止執行。
8. 調用方法，實作效果。
1、f12運作到chrome浏覽器。
2、點選開始進度按鈕，加載進度。顯示進度加載情況。
3、加載到100% 停止定時器!
4、按鈕結束進度按鈕，停止定時器。直接從目前進度停止。
本項目，事件監聽遇到的一些難點進行了分析及提供解決方案。
歡迎大家積極嘗試，有時候看到别人實作起來很簡單，但是到自己動手實作的時候，總會有各種各樣的問題，切勿眼高手低，勤動手，才可以了解的更加深刻。
html+css也可以做出網站頁面的效果，在上面顯示圖檔标題的地方不能用絕對定位，于是用的relative定位，這個地方是布局的核心部分，否則無法将文字放在圖檔之上。
此進度條是div+css制作實作，通過對div寬度按照百分比來實作百分比進度條效果，大家可以将背景美化、邊框美化實作自己需要的漂亮美化的進度條效果。
代碼很簡單，希望對你有所啟發。