css进度圈制作

CSS 进度圈制作方法

进度圈（环形进度条）可以通过纯CSS结合HTML实现，以下是几种常见方法：

使用CSS conic-gradient

通过圆锥渐变创建环形进度效果：

<div class="progress-circle" style="--progress: 75"></div>

.progress-circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: conic-gradient(
    #3498db calc(var(--progress) * 1%),
    #eee 0
  );
  display: flex;
  align-items: center;
  justify-content: center;
}
.progress-circle::before {
  content: attr(style);
  background: white;
  width: 80%;
  height: 80%;
  border-radius: 50%;
}

使用SVG和CSS

结合SVG的stroke-dasharray属性实现：

<svg class="progress-svg" viewBox="0 0 36 36">
  <path class="circle-bg"
    d="M18 2.0845
      a 15.9155 15.9155 0 0 1 0 31.831
      a 15.9155 15.9155 0 0 1 0 -31.831"
  />
  <path class="circle-fill"
    stroke-dasharray="75, 100"
    d="M18 2.0845
      a 15.9155 15.9155 0 0 1 0 31.831
      a 15.9155 15.9155 0 0 1 0 -31.831"
  />
</svg>

.progress-svg {
  width: 100px;
  height: 100px;
  transform: rotate(-90deg);
}
.circle-bg {
  fill: none;
  stroke: #eee;
  stroke-width: 3;
}
.circle-fill {
  fill: none;
  stroke: #3498db;
  stroke-width: 3;
  stroke-linecap: round;
}

使用CSS动画实现动态效果

为进度圈添加动画过渡：

@keyframes progress {
  from { --progress: 0; }
  to { --progress: 75; }
}

.progress-circle {
  animation: progress 2s ease-out forwards;
}

多色分段进度圈

创建分段颜色的进度圈：

.progress-multicolor {
  background: conic-gradient(
    #e74c3c 0% 25%,
    #f39c12 25% 50%,
    #2ecc71 50% 75%,
    #3498db 75% 100%
  );
}

注意事项

• 圆锥渐变方法在旧浏览器可能需要polyfill
• SVG方法兼容性更好且更精确
• 使用CSS变量（如--progress）可以轻松通过JavaScript动态控制进度
• 环形进度通常需要配合伪元素创建中心遮罩实现空心效果

以上方法均可通过调整CSS变量或stroke-dasharray值动态改变进度百分比。