CSS3 圆形进度条 详细讲解如何使用CSS3制作圆形滚动进度条动画

🎨 用CSS3画个会动的甜甜圈？圆形进度条实战教程

场景想象：你正在开发一个健身App，用户完成训练后，屏幕上跳出一个炫酷的圆形进度条，像吃豆人一样"咔哧咔哧"把圆圈啃满，配合百分比数字增长... 这效果绝对比干巴巴的进度条带感100倍！今天就用纯CSS3来实现它 👇

🍩 核心原理拆解

圆形进度条 = 两个半圆魔术 + 旋转障眼法

1. 底层：一个灰色静态圆环（表示总进度）
2. 上层：两个彩色半圆，通过rotate旋转控制显示比例
3. 障眼法：用overflow: hidden的容器遮住多余部分

<!-- 基础结构 -->
<div class="progress-container">
  <div class="progress-bar"></div>
  <div class="progress-mask"></div>
  <span class="progress-text">0%</span>
</div>

🛠️ 分步代码实现

第1步：画个基础圆环

.progress-container {
  width: 200px;
  height: 200px;
  position: relative;
  border-radius: 50%;
  background: #f0f0f0; /* 底层灰色背景 */
}
.progress-bar {
  width: 100%;
  height: 100%;
  border: 10px solid transparent;
  border-radius: 50%;
  position: absolute;
  clip: rect(0, 100px, 200px, 0); /* 只显示左半圆 */
}

第2步：让半圆动起来

/* 右半圆（初始状态） */
.progress-bar.right {
  border-color: #4CAF50;
  transform: rotate(180deg); /* 从6点钟方向开始 */
}
/* 左半圆（动态旋转） */
.progress-bar.left {
  border-color: #4CAF50;
  transform: rotate(0deg);
  animation: left-spin 2s linear forwards;
}
@keyframes left-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(180deg); } /* 转半圈 */
}

第3步：百分比动态更新

// 配合CSS动画同步更新数字
const textEl = document.querySelector('.progress-text');
let percent = 0;
const timer = setInterval(() => {
  percent += 1;
  textEl.textContent = `${percent}%`;
  if (percent >= 100) clearInterval(timer);
}, 20);

🎯 高级技巧锦囊

技巧1：平滑过渡任意百分比

/* 动态计算旋转角度 */
.progress-bar.left {
  transform: rotate(calc(var(--progress) * 3.6deg));
}

技巧2：渐变色彩进度条

.progress-bar {
  border-image: linear-gradient(to right, #FF5722, #FFC107) 1;
}

技巧3：3D立体感

.progress-container {
  box-shadow: inset 0 0 15px rgba(0,0,0,0.2);
}

💡 常见问题急救箱

Q：为什么进度到50%时突然跳变？
A：这是切换左右半圆的临界点，可以通过JS动态修改clip-path区域解决

Q：如何在Vue/React中使用？
A：把--progress设为响应式变量即可，

<template>
  <div class="progress-bar" :style="`--progress: ${progress}`"></div>
</template>

🚀 2025年趋势小贴士

根据2025年CSS新特性,未来可能直接用conic-gradient实现更简洁：

.progress-circle {
  background: conic-gradient(green 0% 75%, lightgray 75% 100%);
}

动手时间到！ 🎉 试着调整border-width改变圆环粗细，或者加上box-shadow制造发光效果，最好的学习方式就是把代码玩坏再修好～