极客教程使用HTML和CSS创建圆形进度条
参考： Create a Circular Progress Bar using HTML and CSS
在现代网页设计中，圆形进度条是一种常见的元素，它用于展示进度信息，如文件上传、下载、任务完成度等。本文将详细介绍如何使用HTML和CSS来创建一个圆形进度条，并提供10-20个示例代码，帮助读者更好地理解和实践。
基础圆形进度条
首先，我们从最基础的圆形进度条开始。以下是一个简单的HTML和CSS代码示例，创建一个基础的圆形进度条。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基础圆形进度条 - how2html.com</title>
<style>
.progress-circle {
width: 100px;
height: 100px;
border-radius: 50%;
background: #e6e6e6;
position: relative;
}
.progress-circle:after {
content: 'how2html.com';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
</style>
</head>
<body>
<div class="progress-circle"></div>
</body>
</html>
Output:
带有百分比的圆形进度条
接下来，我们在圆形进度条中添加文本来显示进度的百分比。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>带百分比的圆形进度条 - how2html.com</title>
<style>
.progress-circle {
width: 100px;
height: 100px;
border-radius: 50%;
background: #e6e6e6;
position: relative;
text-align: center;
line-height: 100px;
font-size: 20px;
color: #333;
}
</style>
</head>
<body>
<div class="progress-circle">50%</div>
</body>
</html>
Output:
使用CSS动画的圆形进度条
为了让圆形进度条看起来更生动，我们可以添加CSS动画来模拟进度的变化。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动画圆形进度条 - how2html.com</title>
<style>
@keyframes loading {
0% { background-position: 0 0; }
100% { background-position: 100px 0; }
}
.progress-circle {
width: 100px;
height: 100px;
border-radius: 50%;
background: linear-gradient(to right, #4ca1af 50%, #c4e0e5 50%);
background-size: 200% 100%;
position: relative;
animation: loading 2s linear infinite;
}
.progress-circle:after {
content: 'how2html.com';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
</style>
</head>
<body>
<div class="progress-circle"></div>
</body>
</html>
Output:
使用SVG的圆形进度条
SVG是一种非常适合制作圆形进度条的技术。下面是一个使用SVG创建的圆形进度条示例。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>SVG圆形进度条 - how2html.com</title>
<style>
.progress-circle {
width: 100px;
height: 100px;
}
.progress-circle svg {
transform: rotate(-90deg);
}
.progress-circle circle {
fill: none;
stroke-width: 10;
stroke: #4ca1af;
stroke-dasharray: 314; /* Circumference of the circle */
stroke-dashoffset: 157; /* Half of 314 */
transition: stroke-dashoffset 1s;
}
</style>
</head>
<body>
<div class="progress-circle">
<svg width="100" height="100">
<circle cx="50" cy="50" r="50" stroke="#e6e6e6" stroke-width="10" fill="none" />
<circle cx="50" cy="50" r="50" class="progress" />
</svg>
<div class="progress-text">how2html.com</div>
</div>
</body>
</html>
Output:
使用CSS变量的动态圆形进度条
CSS变量可以让我们更灵活地控制圆形进度条的样式和行为。以下是一个使用CSS变量的圆形进度条示例。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动态圆形进度条 - how2html.com</title>
<style>
:root {
--progress: 75;
}
.progress-circle {
width: 100px;
height: 100px;
border-radius: 50%;
background: conic-gradient(#4ca1af calc(var(--progress) * 1%), #e6e6e6 0);
position: relative;
}
.progress-circle:after {
content: attr(data-progress) '%';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
</style>
</head>
<body>
<div class="progress-circle" data-progress="75"></div>
</body>
</html>
Output:
带有阴影效果的圆形进度条
阴影效果可以让圆形进度条看起来更有立体感。以下是一个带有阴影效果的圆形进度条示例。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>带阴影的圆形进度条 - how2html.com</title>
<style>
.progress-circle {
width: 100px;
height: 100px;
border-radius: 50%;
background: #e6e6e6;
box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.2);
position: relative;
}
.progress-circle:after {
content: 'how2html.com';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
</style>
</head>
<body>
<div class="progress-circle"></div>
</body>
</html>
Output:
使用伪元素的圆形进度条
伪元素可以帮助我们在不增加额外HTML元素的情况下，实现更复杂的圆形进度条设计。以下是一个使用伪元素的圆形进度条示例。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用伪元素的圆形进度条 - how2html.com</title>
<style>
.progress-circle {
width: 100px;
height: 100px;
border-radius: 50%;
background: #e6e6e6;
position: relative;
}
.progress-circle:before,
.progress-circle:after {
content: '';
position: absolute;
border-radius: 50%;
}
.progress-circle:before {
width: 80px;
height: 80px;
background: white;
top: 10px;
left: 10px;
}
.progress-circle:after {
width: 100px;
height: 100px;
background: conic-gradient(#4ca1af 75%, #e6e6e6 0);
top: 0;
left: 0;
}
.progress-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
z-index: 10;
font-size: 20px;
color: #333;
}
</style>
</head>
<body>
<div class="progress-circle">
<div class="progress-text">how2html.com</div>
</div>
</body>
</html>
Output:
带有渐变色的圆形进度条
渐变色可以让圆形进度条看起来更具视觉冲击力。以下是一个带有渐变色的圆形进度条示例。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>渐变色圆形进度条 - how2html.com</title>
<style>
.progress-circle {
width: 100px;
height: 100px;
border-radius: 50%;
background: conic-gradient(#4ca1af 75%, #c4e0e5 25%);
position: relative;
}
.progress-circle:after {
content: 'how2html.com';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
</style>
</head>
<body>
<div class="progress-circle"></div>
</body>
</html>
Output:
使用多层圆形的进度条
通过使用多层圆形，我们可以创建出更复杂和有趣的进度条效果。以下是一个使用多层圆形的进度条示例。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>多层圆形进度条 - how2html.com</title>
<style>
.progress-circle {
width: 100px;
height: 100px;
border-radius: 50%;
background: #e6e6e6;
position: relative;
}
.progress-circle:before,
.progress-circle:after {
content: '';
position: absolute;
border-radius: 50%;
}
.progress-circle:before {
width: 90px;
height: 90px;
background: conic-gradient(#4ca1af 75%, transparent 25%);
top: 5px;
left: 5px;
}
.progress-circle:after {
width: 70px;
height: 70px;
background: white;
top: 15px;
left: 15px;
}
.progress-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
z-index: 10;
font-size: 20px;
color: #333;
}
</style>
</head>
<body>
<div class="progress-circle">
<div class="progress-text">how2html.com</div>
</div>
</body>
</html>
Output:
结论
通过本文的介绍和示例代码，我们可以看到使用HTML和CSS创建圆形进度条有多种方法和风格。从基础的静态进度条到动态的、带有动画的进度条，再到使用SVG和CSS变量的高级应用，每种方法都有其独特之处和适用场景。