一篇文章教會你使用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. 調用方法，實現效果。

四、效果展示

1、f12運行到chrome瀏覽器。

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

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

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

五、總結

本項目，事件監聽遇到的一些難點進行了分析及提供解決方案。
歡迎大家積極嘗試，有時候看到別人實現起來很簡單，但是到自己動手實現的時候，總會有各種各樣的問題，切勿眼高手低，勤動手，才可以理解的更加深刻。
HTML+CSS也可以做出網站頁面的效果，在上面顯示圖片標題的地方不能用絕對定位，于是用的relative定位，這個地方是布局的核心部分，否則無法將文字放在圖片之上。
此進度條是DIV+CSS制作實現，通過對DIV寬度按照百分比來實現百分比進度條效果，大家可以將背景美化、邊框美化實現自己需要的漂亮美化的進度條效果。
代碼很簡單，希望對你有所啟發。

果圖

在渲染頁面的過程中，進度條是我們最為常見的，有條形進度條，圓環進度條，圓形進度條。今天，我們就來實現一下圓形進度條。

用到的知識點：

1、transform：rotate；（旋轉）

2、animation；（動畫關鍵幀）

首先，我們創建一個box，作為父級容器，定寬定高（160px），定位（position：relative）;

.box{

width: 160px;

height: 160px;

margin: 200px auto;

position: relative;

}

圓形進度條，分為左右兩部分，利用時間差，通過動畫關鍵幀來達到進度效果。

接下來，我們首先實現左側部分，創建一個div，類名為left-box，定寬定高（80px，160px）；定位（position：absolute）；

在left-box下創建一個div為子元素，類名為left-tran 和 left。接下來，設置left-tran樣式。

我們要明白，進度條的實現是通過時間差，改變邊框的顏色。通俗一點：就是一個div，width和height都為0px；邊框寬度設為100%；然后top和left為一組，bottom和right為一組，分別設置不同的顏色。效果如下圖：

接下來。將父級設置overflow：hidden。超出部分隱藏。這樣就只顯示一半的邊框，隨后便利用transform：rotate旋轉45deg，邊框邊圓角得到最終效果，如下圖：

最后設置關鍵幀，不同的邊框顏色就會相互轉變

這樣。左側的樣式就已經完成，右側的與之相似，這里，我們就不在這里多加描述。

待完成右側樣式，兩個關鍵幀動畫相互協調，就可以完成一個圓形進度條啦。

今天的全部代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Document</title>
 <style>
 * {
 padding: 0px;
 margin: 0px;
 }
 .box {
 width: 200px;
 height: 200px;
 position: relative;
 margin: 100px auto;
 box-sizing: border-box;
 }
 .left-box{
 width: 100px;
 height: 200px;
 position: absolute;
 left: 0px;
 top: 0px;
 box-sizing: border-box;
 overflow: hidden;
 }
 .left-tran{
 width: 0px;
 height: 0px;
 border: 100px solid;
 box-sizing: border-box;
 transform: rotate(45deg);
 border-radius: 50%;
 
 }
 .left{
 border-left: 100px solid #e3e4e5;
 border-bottom: 100px solid #e3e4e5; 
 animation: leftmove 10s linear infinite;
 }
 @keyframes leftmove{
 0%{
 transform: rotate(45deg);
 }
 50%{
 transform: rotate(45deg);
 }
 100%{
 transform: rotate(225deg);
 }
 }
 .right-box{
 width: 100px;
 height: 200px;
 position: absolute;
 top: 0px;
 right: 0px;
 box-sizing: border-box;
 overflow: hidden;
 }
 .right-tran{
 width: 0px; 
 height: 0px;
 border: 100px solid;
 position: absolute;
 top: 0px;
 right: 0px;
 transform: rotate(45deg);
 border-radius: 50%;
 
 }
 .right{
 border-right: 100px solid #e3e4e5;
 border-top: 100px solid #e3e4e5;
 animation: rightmove 10s linear infinite;
 }
 @keyframes rightmove{
 0%{
 transform: rotate(45deg);
 }
 50%{
 transform: rotate(225deg);
 }
 100%{
 transform: rotate(225deg);
 }
 }
 
 </style>
</head>
<body>
 <div class="box">
 <div class="left-box">
 <div class="left-tran left"></div>
 </div>
 <div class="right-box">
 <div class="right-tran right"></div>
 </div>
 </div>
</body>
</html>

進度條，結合和時間戳，就可以很好的完成一個完美的時間進度條了。

希望今天的知識點對大家有所幫助。

享一個很酷炫的視頻，通過滑動桿控制儀表進度顯示，同時伴有燈光效果，看起來非常震撼。html非常簡單，只有幾個元素，使用了一個進度條滑動桿的控件。接下來我們重點來看一下CSS，從這里可以看到，頁面長什么樣子。

好的，現在來說一下滑動桿的樣式，這是一個滑軌的樣式，其他屬性沒有什么特別的，我們主要看一下這幾個。

首先要自定義進度條的樣式，box-shadow：因為這個控件瀏覽器默認會有一套自己的樣式，只有把 shadow設為難才可以自定義模式，如果把這個樣式去掉，那整個滑桿其它的樣式全部都不起效了。

非常重要的是這兩句的設置，這兩句有什么用呢？當移動滑塊時，大家注意滑軌，在滑塊的左邊它就會變成藍色，滑塊的右邊還是黑色，無論移到什么地方都一樣，主要用來控制這一個的。

接下來分析一下這兩句，為什么背景這里用了兩個顏色？第一個是漸變色，第二個是黑色。最主要的是漸變色里面的這兩個顏色還是同一個，lwhite都是這一個變量，說白了它壓根沒有漸變的效果。

·box-shadow：為什么不直接用這個顏色而要把它搞成漸變？box-shadow：首先用兩個顏色，是因為滑軌它就需要兩個顏色，滑塊的左邊是藍色，滑塊的右邊是黑色，這兩個顏色。之所以會對同一個顏色做漸變，是因為需要配合boxsha一起來使用。

通常background-size是用來設置背景圖顯示的，對單一顏色是不起作用的。這里用線性漸變就相當于取巧。white用了一個小技巧，因為這里漸變的就是同一個顏色，和單一顏色沒有區別，初始值設置為0100%，也就是這一個顏色。漸變的顏色開始是沒有顯示的，也就是現在這樣子。

如果我們把它改一下，改成50%。第一個顏色就會顯示到中間位置了，再改成90%，試一下。第一個顏色就會顯示到后面了。

→當滑塊移動的時候通過JS修改這一個值，是不是就可以動態同步滑軌的顏色狀態了？這里先改回0，再看一下這個樣式。s inputltype='range：webkit-lips thumb。這是一個滑塊的樣式，沒有什么特別要說的，用的屬性都很簡單。

主要就來看一下這個偽元素，用這個偽元素就說明要修改的是滑塊的樣式。僅此而已。

→還有就是滑塊的發光效果用的就是陰影，也就是這一個的樣式。以下是清除中間顯示百分比數字的樣式，沒有什么特別的，主要是中間發光的效果。后面兩個是中間儀表盤的樣式，但現在還沒有span，需要通過JavaScript創建出來。樣式很簡單，沒有特別的，我們來看看JS?，F在已經獲取了幾個對象來做一個for循環，畫出100個指針。我們需要通過JavaScript來創建這些span，因為這些span需要在圖形的表盤上分布。這些span需要旋轉一定的角度，然后再放入main中。現在表盤應該出來了，沒有問題，但是似乎有些擁擠。我們需要修改CSS，將寬度設置為40個TB。將滑動桿向下移動25個TB?，F在來看一下效果。現在來處理一下，當移動滑塊時，顏色和中間的百分比會隨之變化。實際上，這并不難，只需要監聽滑桿的輸入事件。我們需要修改滑軌的背景大小，只需將其水平方向的where復給百分號即可，而垂直方向則保持100%的寬度。

中間顯示的百分比很簡單，只需要將值給它就可以了。我們來看一下效果，移動滑塊沒有問題，滑軌的顏色和上面的百分比都跟著發生變化了。

接下來，我們需要寫一個函數，當移動滑塊時，改變儀表指針的顏色。我們需要循環所有的指針。當i小于傳入的值時，我們需要設置前面一部分指針的顏色和屬性。

首先，我們需要設置自定義的顏色bg。我們使用了CSS的色相飽和度函數，后面兩個值代表飽和度和亮度，通常設置為100%和50%。這并不重要，我們需要設置色相。我們需要根據不同位置的指針設置不同的色相，這樣顏色看起來會更加豐富。另外，我們還需要設置sg的顏色屬性。

其他指針使用CSS中設置的黑色背景和透明sg。現在來看一下指針的顏色狀態是否發生了變化，移動滑塊，沒有問題，可以跟著發生變化了。

這個視頻到此結束，感謝大家的收看。

在線咨詢

上一篇：當HTML頁面加載就觸發點擊a標簽
下一篇：前端開發：JavaScript 資源大全（二）

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

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

一、前言

二、項目準備

三、項目實現

四、效果展示