HTML/CSS 进度条实现指南：横向、圆环、球形及充电动画详解

脚本专家

在前端开发中，进度条是最常见的 UI 组件之一。虽然已有许多现成插件，但为了满足定制化样式和动画需求，掌握纯 HTML/CSS 实现进度条的方法依然十分必要。本文将从基础标签说起，逐步深入到纯 CSS 的各种花式进度条，包括横向、圆环形、球形以及仿手机充电动画，并剖析常见问题如锯齿、样式兼容性等。

## 一、原生 HTML 标签：meter 与 progress

HTML5 提供了两个专门用于表示进度或度量的标签：`<meter>` 和 `<progress>`。

### 1. `<meter>` 标签
`<meter>` 用于表示已知范围内的标量测量值，例如温度、速度等。其属性包括 `min`（最小值）、`max`（最大值）和 `value`（当前值）。示例：

2. <p>
3.   <span>完成度：</span>
4.   <meter min="0" max="500" value="350">350 degrees</meter>
5. </p>

复制代码

### 2. `<progress>` 标签
`<progress>` 用于表示任务的完成进度，例如文件上传、表单填写进度。属性 `max` 定义总工作量，`value` 定义已完成量。示例：

2. <p>
3.   <label for="file">完成度：</label>
4.   <progress max="100" value="70">70%</progress>
5. </p>

复制代码

**两者语义区别**：`<meter>` 适用于固定范围内的数值（如汽车仪表盘时速），而 `<progress>` 更适合动态任务的进度（如加载百分比）。

### 3. 原生标签的局限性
尽管原生标签简单易用，但在实际生产环境中很少直接使用，原因包括：
- 无法统一修改背景色、前景色等样式。
- 不同浏览器的默认样式差异大，难以保证视觉效果一致。
- 无法添加动画、交互效果（如渐变、波纹）。

因此，更主流的做法是使用纯 CSS 模拟进度条，实现灵活可控的 UI。

## 二、纯 CSS 实现横向进度条

### 1. 百分比+渐变方案
最基础的横向进度条，通过 div 嵌套，用背景色百分比控制进度：

2. <div class="g-progress" style="--progress: 70%"></div>

复制代码

CSS 部分：

2. @property --progress {
3.   syntax: '<percentage>';
4.   inherits: false;
5.   initial-value: 0%;
6. }
7. .g-progress {
8.   width: 240px;
9.   height: 25px;
10.   border-radius: 25px;
11.   background: linear-gradient(90deg, #0f0, #0ff var(--progress), transparent 0);
12.   border: 1px solid #eee;
13.   transition: .3s --progress;
14. }

复制代码

利用 `@property` 注册自定义属性，可实现进度平滑过渡动画。

## 三、纯 CSS 实现圆环形进度条

圆环形进度条的关键是使用角向渐变 `conic-gradient()`。一个典型示例：

2. <div class="progress-circle" style="background: radial-gradient(#fff 55%, transparent 56%), conic-gradient(#3A7CFF 70%, #f5f5f5 70.4%), radial-gradient(#fff 60%, #F1F3FC 0%);">
3.   <span class="progress-value">名称</span>
4.   <div class="totalvalbox">70%</div>
5. </div>

复制代码

CSS 样式（SCSS 风格，可转为普通 CSS）：

2. .progress-circle {
3.   position: relative;
4.   width: 149rpx;
5.   height: 149rpx;
6.   border-radius: 50%;
7.   display: flex;
8.   align-items: center;
9.   justify-content: center;
10. }
11. .progress-value {
12.   position: absolute;
13.   text-align: center;
14.   width: 100%;
15.   font-weight: 400;
16.   font-size: 26rpx;
17.   line-height: 50rpx;
18. }
19. .totalvalbox {
20.   min-width: 217rpx;
21.   text-align: center;
22.   position: absolute;
23.   bottom: -50rpx;
24.   font-weight: 400;
25.   font-size: 30rpx;
26. }

复制代码

### 锯齿问题与解决方案
角向渐变在不同颜色衔接处会出现明显锯齿，尤其是非整十的角度（如 27%）。解决方法是在衔接处留出微小过渡空间，例如将 `27%, #B5838D` 改为 `27%, #B5838D 27.2%`，增加 0.2% 的渐变宽容度。

### 圆角收尾的圆环形进度条
若进度条两端需要圆角（纯色场景），可在首尾叠加两个小圆点实现。若进度条为渐变色，则需借助 SVG 或 Canvas。示例：

2. <div class="g-container">
3.   <div class="g-progress"></div>
4.   <div class="g-circle"></div>
5. </div>

复制代码

CSS：

2. .g-container {
3.   position: relative;
4.   width: 200px;
5.   height: 200px;
6.   margin: auto;
7. }
8. .g-progress {
9.   width: 100%;
10.   height: 100%;
11.   border-radius: 50%;
12.   background: conic-gradient(#FFCDB2 0, #FFCDB2 25%, #B5838D 25%, #B5838D);
13.   mask: radial-gradient(transparent, transparent 80px, #000 80.5px, #000 0);
14. }
15. .g-circle::before,
16. .g-circle::after {
17.   content: '';
18.   position: absolute;
19.   top: 90px;
20.   left: 90px;
21.   width: 20px;
22.   height: 20px;
23.   border-radius: 50%;
24.   background: #FFCDB2;
25.   z-index: 1;
26. }
27. .g-circle::before {
28.   transform: translate(0, -90px);
29. }
30. .g-circle::after {
31.   transform: rotate(90deg) translate(0, -90px);
32. }

复制代码

此外，利用多段角向渐变还能实现多色圆环（类似饼图）。

## 四、纯 CSS 实现球形进度条（波浪动画）

球形进度条通过波浪高度表示进度，核心是两层旋转的模糊圆和容器裁剪。
HTML：

2. <div class="container">
3.   <div class="wave-change"></div>
4.   <div class="wave"></div>
5.   <p>70%</p>
6. </div>

复制代码

CSS：

2. .container {
3.   width: 200px;
4.   height: 200px;
5.   border: 5px solid rgb(118, 218, 255);
6.   border-radius: 50%;
7.   overflow: hidden;
8.   position: relative;
9. }
10. .wave-change {
11.   position: absolute;
12.   width: 200px;
13.   height: 200px;
14.   left: 0;
15.   top: 0;
16.   animation: change 12s infinite linear;
17. }
18. .wave-change::before,
19. .wave-change::after {
20.   content: '';
21.   position: absolute;
22.   width: 400px;
23.   height: 400px;
24.   top: 0;
25.   left: 50%;
26.   border-radius: 45% 47% 43% 46%;
27.   background-color: rgba(255, 255, 255, .6);
28.   transform: translate(-50%, -70%) rotate(0);
29.   animation: rotate 7s linear infinite;
30.   z-index: 1;
31. }
32. .wave-change::after {
33.   border-radius: 47% 42% 46% 44%;
34.   background-color: rgba(255, 255, 255, .8);
35.   animation: rotate 9s linear -4s infinite;
36.   z-index: 2;
37. }
38. .wave {
39.   width: 200px;
40.   height: 200px;
41.   background-color: rgb(118, 218, 255);
42.   border-radius: 50%;
43. }
44. p {
45.   position: absolute;
46.   top: 50%;
47.   left: 50%;
48.   transform: translate(-50%, -50%);
49.   font-size: 36px;
50.   color: #000;
51.   z-index: 10;
52. }
53. @keyframes rotate {
54.   to { transform: translate(-50%, -70%) rotate(360deg); }
55. }
56. @keyframes change {
57.   from { top: 80px; }
58.   to { top: -120px; }
59. }

复制代码

通过调整 `.wave-change` 的 `top` 值（从 80px 到 -120px）模拟 0% 至 100% 的进度变化。

## 五、炫酷充电动画（仿华为）

利用 CSS 的 `filter: contrast()` 和 `hue-rotate()` 可以实现类似手机充电动画的效果——动态气泡上升、颜色变化。
HTML 结构：

2. <div class="g-container">
3.   <div class="g-number">98.7%</div>
4.   <div class="g-contrast">
5.     <div class="g-circle"></div>
6.     <ul class="g-bubbles"></ul>
7.   </div>
8. </div>

复制代码

核心 CSS 摘要：
- 外层容器设置 `filter: contrast(10) hue-rotate(0)` 并添加动画不断修改色相。
- 内部圆环使用模糊滤镜和旋转动画产生动态波纹。
- 气泡列表中的每个 li 随机位置和大小，通过 `moveToTop` 动画上升并逐渐透明。

完整代码较长，但核心原理是：通过 `contrast` 滤镜增强颜色对比度，`hue-rotate` 循环旋转色相，气泡模糊后与背景融合形成发光效果。动画可参考 CodePen 上的 “[Bars By Lucagaz](https://codepen.io/)” 作品。

## 六、总结

通过上述案例可以看出，纯 CSS 能够实现从简单到复杂的各类进度条，且支持动画和高度定制。核心技巧包括：
- 利用 `linear-gradient` 和 `conic-gradient` 绘制进度背景。
- 使用 `mask` 或 `radial-gradient` 实现空心圆环。
- 通过 `@property` 注册自定义属性实现平滑过渡。
- 利用 `transform`、`filter` 和 `animation` 创造动态效果。

掌握这些方法后，开发者可以完全摆脱对第三方进度条插件的依赖，根据需要快速构建出符合设计稿的进度组件。

热心网友5

这篇教程非常实用，从基础的 `meter`/`progress` 标签到纯 CSS 的花式进度条都覆盖了，而且直接给出了可运行的代码片段。最赞的是连角向渐变的锯齿问题都提到了解决方案，很多教程会忽略这个细节。个人感觉 `@property` 配合渐变实现平滑过渡那一块特别适合实际项目，既灵活又能避免 JS 干预。收藏下来，下次做自定义进度条时可以直接当参考了！