菜鸟-创作你的创作

如何通过HTML/CSS 实现各类进度条的功能

lichongyang

下面是一篇可直接发布的完整图文教程文章，适合 博客 / WordPress / CSDN / 自媒体平台，主题聚焦 HTML + CSS 实现各类进度条，包含示例代码与应用场景说明。

如何通过 HTML / CSS 实现各类进度条的功能（完整教程）

在网页开发中，进度条（Progress Bar） 是非常常见的 UI 元素，常用于展示：

本文将从基础到进阶，系统讲解如何仅使用 HTML + CSS 实现多种进度条效果，并附带可直接使用的代码示例。

一、进度条的常见类型

在实际开发中，进度条通常分为以下几类：

  1. 原生 <progress> 标签进度条
  2. 纯 HTML + CSS 静态进度条
  3. 带动画效果的进度条
  4. 圆形进度条（环形）
  5. 多段式 / 分步骤进度条

下面我们逐一实现。

二、使用 HTML 原生 <progress> 标签（最简单）

1️⃣ 基础写法

&lt;progress value="60" max="100">&lt;/progress>

2️⃣ 优点与缺点

优点：

缺点：

3️⃣ 简单美化（CSS）

progress {
  width: 300px;
  height: 20px;
}

progress::-webkit-progress-bar {
  background-color: #eee;
  border-radius: 10px;
}

progress::-webkit-progress-value {
  background-color: #4caf50;
  border-radius: 10px;
}

⚠️ 注意：不同浏览器需要不同前缀，兼容性一般。

三、纯 HTML + CSS 实现自定义进度条（推荐）

这是最常用、最灵活的方式。

1️⃣ 基础结构

&lt;div class="progress">
  &lt;div class="progress-bar" style="width: 70%">&lt;/div>
&lt;/div>

2️⃣ CSS 样式

.progress {
  width: 300px;
  height: 20px;
  background-color: #eee;
  border-radius: 10px;
  overflow: hidden;
}

.progress-bar {
  height: 100%;
  background-color: #2196f3;
}

✅ 优点：

四、带百分比文字的进度条

HTML

&lt;div class="progress">
  &lt;div class="progress-bar" style="width: 85%">
    &lt;span>85%&lt;/span>
  &lt;/div>
&lt;/div>

CSS

.progress-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 12px;
}

适合用于：

五、带动画效果的进度条

CSS 动画版本（无需 JS）

&lt;div class="progress">
  &lt;div class="progress-bar animate">&lt;/div>
&lt;/div>


.progress-bar.animate {
  width: 0;
  animation: load 2s forwards;
}

@keyframes load {
  to {
    width: 75%;
  }
}

📌 应用场景：

六、圆形进度条（CSS 实现）

1️⃣ HTML

&lt;div class="circle">
  &lt;span>65%&lt;/span>
&lt;/div>

2️⃣ CSS（使用 conic-gradient）

.circle {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: conic-gradient(#4caf50 65%, #eee 0);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
}

✅ 优点：

📌 适合：

七、多段式 / 步骤进度条

HTML

&lt;div class="steps">
  &lt;div class="step active">1&lt;/div>
  &lt;div class="step active">2&lt;/div>
  &lt;div class="step">3&lt;/div>
&lt;/div>

CSS

.steps {
  display: flex;
  gap: 10px;
}

.step {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #ccc;
  text-align: center;
  line-height: 30px;
}

.step.active {
  background: #4caf50;
  color: #fff;
}

📌 常用于：

八、进度条设计与使用建议

✔ 进度颜色要清晰直观
✔ 动画不宜过慢，避免用户焦虑
✔ 数值与视觉要一致
✔ 移动端注意高度和触控体验

❌ 不要过度使用复杂动画
❌ 避免进度条“假加载”

九、总结

通过 HTML / CSS，我们可以轻松实现：

无需 JavaScript，也能完成 80% 的进度条需求。

如果你在做：

这些进度条方案都可以直接复用。

退出移动版