数据结构
网络
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 千+ 浏览
广告