菜鸟-创作你的创作

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

lichongyang

在 HTML/CSS 中实现各类进度条（条形、圆形、波浪、条纹动画等）非常常见，现代浏览器（2025 年）支持丰富的 CSS 特性（如 conic-gradient、linear-gradient、animation、clip-path 等），可以实现纯 CSS 或简单 JS 控制的各种效果。下面按常见类型分类整理，包含完整代码和说明，你可以直接复制使用。1. 最基础条形进度条（div + width）

html

<div class="progress-bar-container">
  <div class="progress-bar" style="width: 75%;"></div>
</div>

css

.progress-bar-container {
  width: 100%;
  height: 20px;
  background: #e0e0e0;
  border-radius: 10px;
  overflow: hidden;
}

.progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #4facfe, #00f2fe);
  transition: width 0.6s ease;
  border-radius: 10px;
}

说明：通过内联 style=”width: xx%” 或 JS 修改宽度实现动态进度。2. 条纹动画进度条（经典 loading 效果）

html

<div class="progress striped animated">
  <div class="progress-fill" style="width: 85%;"></div>
</div>

css

.progress {
  width: 100%;
  height: 24px;
  background: #e0e0e0;
  border-radius: 12px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(
    45deg,
    #4caf50 25%,
    transparent 25%,
    transparent 50%,
    #4caf50 50%,
    #4caf50 75%,
    transparent 75%,
    transparent
  );
  background-size: 40px 40px;
  animation: stripe 2s linear infinite;
}

@keyframes stripe {
  0% { background-position: 0 0; }
  100% { background-position: 40px 0; }
}

说明：使用 background-position 动画实现条纹流动感。3. 圆形进度条（现代 conic-gradient 实现，推荐）

html

<div class="circle-progress" data-percent="72">
  <div class="percent">72%</div>
</div>

css

.circle-progress {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: conic-gradient(#4caf50 0% calc(var(--percent) * 1%), #e0e0e0 calc(var(--percent) * 1%) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  box-shadow: inset 0 0 20px rgba(0,0,0,0.1);
}

.circle-progress::before {
  content: "";
  position: absolute;
  width: 80%;
  height: 80%;
  background: white;
  border-radius: 50%;
}

.percent {
  font-size: 2.5rem;
  font-weight: bold;
  color: #4caf50;
  z-index: 1;
}

JS 动态设置：

javascript

document.querySelectorAll('.circle-progress').forEach(el => {
  const percent = el.dataset.percent;
  el.style.setProperty('--percent', percent);
});

说明：conic-gradient 是现代浏览器（Chrome 84+、Safari 14+、Firefox 83+）支持的圆锥渐变，非常适合圆形进度条。4. 圆形进度条 + 动画（从 0% 增长）

html

<div class="circle-progress" data-percent="85" id="animated-circle"></div>

css

.circle-progress {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: conic-gradient(#2196f3 0deg, #2196f3 var(--progress), #e0e0e0 var(--progress) 100%);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.8rem;
  font-weight: bold;
  color: #2196f3;
}

.circle-progress::before {
  content: "";
  width: 85%;
  height: 85%;
  background: white;
  border-radius: 50%;
  position: absolute;
}

javascript

// 从 0% 动画到目标值
const circle = document.getElementById('animated-circle');
const target = parseInt(circle.dataset.percent);
let current = 0;

const interval = setInterval(() => {
  current += 1;
  circle.style.setProperty('--progress', current + 'deg');
  circle.textContent = current + '%';
  if (current >= target) clearInterval(interval);
}, 30);

说明：每 30ms 递增 1%，实现平滑动画。5. 波浪球形进度条（水球效果）

html

<div class="wave-progress" data-percent="68">
  <div class="wave"></div>
  <div class="wave"></div>
  <div class="percent">68%</div>
</div>

css

.wave-progress {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: #fff;
  overflow: hidden;
  position: relative;
  box-shadow: 0 0 20px rgba(0,0,0,0.2);
}

.wave {
  position: absolute;
  width: 400%;
  height: 400%;
  background: #2196f3;
  border-radius: 45%;
  top: 60%;
  left: -150%;
  animation: wave 12s linear infinite;
  opacity: 0.6;
}

.wave:nth-child(2) {
  animation-delay: -6s;
  opacity: 0.4;
}

.percent {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 3rem;
  font-weight: bold;
  color: white;
  z-index: 10;
  text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

@keyframes wave {
  0% { transform: translateX(0) rotate(0deg); }
  100% { transform: translateX(50%) rotate(360deg); }
}

说明：利用 border-radius + transform 动画实现波浪，控制 top 值可动态调整水位（需 JS）。6. 使用 HTML 原生元素（简单场景）

html

<!-- 普通进度条 -->
<progress value="75" max="100">75%</progress>

<!-- 仪表盘 -->
<meter value="68" min="0" max="100" low="30" high="80" optimum="90">68%</meter>

css

progress {
  appearance: none;
  width: 100%;
  height: 20px;
}

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

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

progress::-moz-progress-bar {
  background: #4caf50;
  border-radius: 10px;
}

说明：浏览器兼容性较好，但自定义能力有限。7. 总结对比表

类型实现方式优点缺点适用场景
基础条形div + width最简单、兼容性最好动画需 JS所有场景
条纹动画linear-gradient + animation无需 JS，纯 CSS 流动效果样式较固定loading / 上传进度
圆形 (现代)conic-gradient代码少、动画顺滑老浏览器不支持仪表盘、技能展示
波浪球形border-radius + animation视觉冲击强性能稍高存储使用率、电池等
原生 <progress>HTML 标签 + CSS 伪元素语义化、易读屏跨浏览器样式不统一简单静态进度

额外提示：

如果你有特定效果（如多色渐变、3D、SVG 版等），告诉我，我可以再提供针对性代码！

退出移动版