如何使用 HTML 和 CSS 實現(xiàn)一個圓形進度條效果
今天我們將學(xué)習(xí)使用 HTML 和 CSS 創(chuàng)建圓形進度條。應(yīng)用程序中進程的進度通過進度條顯示。已完成的流程量和尚未完成的流程量由進度條指示。我們將使用 HTML 設(shè)計進度條的各個部分，并且我們可以使用 CSS 屬性自定義進度條。
如果你想使用 HTML 和 CSS 制作圓形進度條，本教程可能會對你有所幫助。在這里，我將演示如何創(chuàng)建一個簡單的 CSS 圓形進度條。
加載動畫將從 0 變?yōu)榧虞d到頁面賦予的值。
本教程將引導(dǎo)你完成我創(chuàng)建圓形進度條所采取的每個步驟。你必須熟悉基本的 HTML 和 CSS 概念才能創(chuàng)建它。
第一步：添加基本結(jié)構(gòu)和樣式。
首先，我們必須為圓形進度條添加一個容器。我們將采用基本的 HTML 思想來實現(xiàn)它。我們的圓形進度條的容器將使用 div 標(biāo)簽制作。
<div class="container">
</div>我們的圓形進度條現(xiàn)在有一個容器。我們現(xiàn)在將使用 CSS 概念向容器添加樣式。
我們將使用通用選擇器向我們的網(wǎng)站添加一些樣式。我們將使用 box-sizing 屬性將框大小設(shè)置為“border-box”。填充和邊距的值為“0”。
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}.container {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
background-color:lightblue;
height: 100vh;
align-items: center;
}使用類選擇器 (.container)。顯示設(shè)置為“flex”，并且我們使用 justify-content 屬性設(shè)置每個進度條周圍的空間。我們將使用背景顏色屬性為我們的項目提供淺藍色背景顏色。
第二步：添加圓圈。
為了構(gòu)建循環(huán)進度條，我們使用了 HTML 和 CSS。將在我們的容器內(nèi)創(chuàng)建一個帶有類 (progress) 的新 div。我們的項目將通過使用 CSS 中的類選擇器來獲得一個圓圈。
<div class="container">
<div class="progress">
</div>
</div>.progress {
width: 200px;
height: 200px;
font-size: 30px;
color: #fff;
border-radius: 50%;
overflow: hidden;
position: relative;
background: #07070c;
text-align: center;
line-height: 200px;
margin: 20px;
box-shadow: 2px 2px 2px 2px white;
}
.progress::after {
content: "";
}使用類選擇器（.progress）。寬度和高度的尺寸均為 200px。font-size 屬性將用于將字體大小設(shè)置為 30px。我們將利用邊框半徑功能來提供圓形外觀。為了創(chuàng)建圓形外觀，我們將其邊界半徑設(shè)置為 50%。我們現(xiàn)在使用的圓圈有黑色背景。為了給我們的圓一個 3D 外觀，我們還添加了一個盒子陰影。
接著，將輸入添加到圓圈中。
現(xiàn)在，使用 span 標(biāo)簽，我們將向圓形添加一個數(shù)字輸入，并將值的范圍從 0 調(diào)整到 85。為了將進度運動添加到圓形進度條，我們將從進度 div 中創(chuàng)建 3 個 div。首先將創(chuàng)建一個帶有類的 div（覆蓋）。
<div class="container">
<div class="progress">
<span class="title timer" data-from="0" data-to="85" data-speed="1800">85</span>
<div class="overlay"></div>
<div class="left"></div>
<div class="right"></div>
</div>
</div>現(xiàn)在，我們將使用疊加層添加 50% 寬度和 100% 高度。該位置也有“絕對”設(shè)置。我們的圓形進度條的一半僅由覆蓋層設(shè)計。使用背景顏色屬性，我們在疊加層中添加了黑色背景。
.progress .overlay {
width: 50%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 1;
background-color: #07070c;
}第2步：將動畫進度條添加到圓圈中。
我們在容器標(biāo)簽中指定的 div 將用于添加進度。已經(jīng)制作了兩個 div 并指定了“左”和“右”類。我們將使用它們?yōu)槲覀兊娜ψ犹峁┮粋€進度條。
<div class="container">
<div class="progress">
<span class="title timer" data-from="0" data-to="85" data-speed="1800">85</span>
<div class="overlay"></div>
<div class="left"></div>
<div class="right"></div>
</div>
</div>現(xiàn)在將使用兩個不同的類（.left 和.right）添加進度條。高度設(shè)置為 100%，寬度設(shè)置為 50%。我們將使用 border 屬性添加 10 px 寬的實心邊框。我們將使用邊框半徑向元素的右上角添加 100px 的邊框半徑。
現(xiàn)在，為了將動畫添加到我們的項目中，我們使用了 CSS 的動畫屬性的簡單概念。元素可以通過動畫逐步從一種樣式切換到另一種樣式。您可以隨時進行任意數(shù)量的 CSS 更改。您必須先定義動畫的關(guān)鍵幀，然后才能使用 CSS 動畫。元素在特定時刻具有的樣式存儲在關(guān)鍵幀中。
這里我們使用動畫作為 0.5 秒的負載，然后使用線性前進我們將添加另一個動畫。
現(xiàn)在我們將使用關(guān)鍵幀，我們將僅使用關(guān)鍵幀在不同的時間間隔添加不同的樣式。
當(dāng)我們添加三個額外的圓形進度條時，進度條將根據(jù)該值進行調(diào)整，每個進度條都有不同的值。如果您可以制作一個進度條來配合它，請嘗試添加更多圓形條。結(jié)果你將能夠更好地理解事情。
現(xiàn)在讓我們看一下我們項目的視頻預(yù)覽。
HTML 代碼：
<html>
<head>
<link rel="stylesheet" href="style.css">
<title>Cicrular Progress Bar </title>
</head>
<body>
<div class="container">
<div class="progress">
<span class="title timer" data-from="0" data-to="85" data-speed="1800">85</span>
<div class="overlay"></div>
<div class="left"></div>
<div class="right"></div>
</div>
<div class="progress">
<span class="title timer" data-from="0" data-to="70" data-speed="1500">70</span>
<div class="overlay"></div>
<div class="left"></div>
<div class="right"></div>
</div>
<div class="progress">
<span class="title timer" data-from="0" data-to="70" data-speed="1500">70</span>
<div class="overlay"></div>
<div class="left"></div>
<div class="right"></div>
</div>
<div class="progress">
<span class="title timer" data-from="0" data-to="85" data-speed="1800">85</span>
<div class="overlay"></div>
<div class="left"></div>
<div class="right"></div>
</div>
</div>
</body>
</html>CSS代碼：
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
.container {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
background-color:lightblue;
height: 100vh;
align-items: center;
}
.progress {
width: 200px;
height: 200px;
font-size: 30px;
color: #fff;
border-radius: 50%;
overflow: hidden;
position: relative;
background: #07070c;
text-align: center;
line-height: 200px;
margin: 20px;
box-shadow: 2px 2px 2px 2px white;
}
.progress::after {
content: "%";
}
.progress .title {
position: relative;
z-index: 100;
}
.progress .overlay {
width: 50%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 1;
background-color: #07070c;
}
.progress .left,
.progress .right {
width: 50%;
height: 100%;
position: absolute;
top: 0;
left: 0;
border: 10px solid gray;
border-radius: 100px 0px 0px 100px;
border-right: 0;
transform-origin: right;
}
.progress .left {
animation: load1 1s linear forwards;
}
.progress:nth-of-type(2) .right,
.progress:nth-of-type(3) .right {
animation: load2 0.5s linear forwards 1s;
}
.progress:last-of-type .right,
.progress:first-of-type .right {
animation: load3 0.8s linear forwards 1s;
}
@keyframes load1 {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(180deg);
}
}
@keyframes load2 {
0% {
z-index: 100;
transform: rotate(180deg);
}
100% {
z-index: 100;
transform: rotate(270deg);
}
}
@keyframes load3 {
0% {
z-index: 100;
transform: rotate(180deg);
}
100% {
z-index: 100;
transform: rotate(315deg);
}
}現(xiàn)在，我們已經(jīng)使用 HTML 和 CSS 成功創(chuàng)建了圓形進度條。你可以通過復(fù)制到 IDE 中直接使用該項目。
