資料結構
網路
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會研究
時尚研究
法律研究
使用 HTML 和 CSS 建立環形進度條
進度條顯示應用程式內某個程式的狀態。進度條會顯示該流程已完成和尚未完成的部分。進度條的各個元件都將使用 HTML 設計，進度條本身可以透過 CSS 屬性修改。
進度條經常在網站中使用，以更加吸引使用者的方式突出顯示特定資料。使用圓形進度條而不是標準（水平）進度條的一個優勢是，你可以在一行中容納更多進度條，從而向用戶顯示更多資訊。讓我們深入瞭解本文，學習如何使用 HTML 和 CSS 建立圓形進度條。
示例
讓我們看一看以下示例，我們將使用 HTML 和 CSS 建立一個圓形進度條。
<!DOCTYPE html>
<html>
<head>
<style>
@property --tutorial-value {
syntax: '<integer>'; inherits: false;
initial-value: 1;
}
@keyframes x-tutorial {
to {
--tutorial-value: 95;
}
}
@keyframes y-tutorial {
to {
--tutorial-value: 82;
}
}
.tutorial-bar {
width: 100px;
height: 100px;
border-radius: 60%;
display: flex;
justify-content: center;
align-items: center;
}
.tutorial-bar::before {
counter-reset: percentage var(--tutorial-value);
content: counter(percentage) '%';
}
.x {
background:
radial-gradient(closest-side, #D5F5E3 60%, transparent 60% 40%),
conic-gradient(#BB8FCE calc(var(--tutorial-value) * 1%), #AED6F1 0);
animation: x-tutorial 1s 1 forwards;
}
.x::before {
animation: x-tutorial 2s 1 forwards;
}
.y {
background:
radial-gradient(closest-side, #D5F5E3 60%, transparent 60% 40%),
conic-gradient(#BB8FCE calc(var(--tutorial-value) * 1%), #AED6F1 0);
animation: y-tutorial 1s 1 forwards;
}
.y::before {
animation: y-tutorial 2s 1 forwards;
}
body {
font-family: verdana;
display: flex;
justify-content: space-around;
max-width: 500px;
}
h2 {
text-align: center;
}
progress {
visibility: hidden;
width: 0;
height: 0;
}
</style>
</head>
<body style=background-color:#EBDEF0>
<div class="tutorial-bar-container">
<h2>
<label for="x">BIKES</label>
</h2>
<div class="tutorial-bar x">
<progress id="x" min="1" max="99" value="92"></progress>
</div>
</div>
<div class="tutorial-bar-container">
<h2>
<label for="y">CARS</label>
</h2>
<div class="tutorial-bar y">
<progress id="y" min="1" max="99" value="87"></progress>
</div>
</div>
</body>
</html>
當我們執行上述程式碼時，它會生成一個圓形進度條輸出，用於兩個元素，一個腳踏車另一個汽車，並應用於網頁上顯示的 CSS。
更新時間：22-1 月 -2024
1 千+ 瀏覽
廣告