如何使用CSS创建圆形进度栏

使用CSS创建环形进度条可通过conic-gradient或clip-path与旋转结合实现，前者适用于静态或JavaScript更新的进度，后者更适合平滑动画；通过CSS变量和伪元素构建圆形外观，用transform: rotate()控制进度填充，并添加transition实现动画效果，支持自定义颜色、厚度和中心标签，根据浏览器兼容性和动画需求选择合适方法。

Creating a circular progress bar with CSS is a clean way to visually represent progress or completion percentages on a webpage. While pure CSS has limitations for dynamic updates, you can build a functional and animated circular progress bar using a combination of CSS and minimal HTML. Here's how.

1. Use a CSS-only approach with pseudo-elements and border rotation

A common method uses a container with a pseudo-element that rotates to simulate the progress fill. This works well for static or semi-dynamic bars (updated via JavaScript classes).

HTML structure:

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

CSS:

.circular-progress {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: conic-gradient(
    #4caf50 var(--progress),
    #e0e0e0 var(--progress)
  );
  position: relative;
}

.circular-progress::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  height: 80%;
  background: white;
  border-radius: 50%;
}

This creates a circle filled up to the percentage defined by the --progress CSS variable (e.g., 75%). The conic-gradient draws the colored arc, and the ::before pseudo-element masks the center to make it look like a ring.

Note: conic-gradient is well-supported in modern browsers but may need fallbacks for older ones.

2. Create a ring-style progress bar using border and clip-path

If you want a thin circular stroke (like a loading spinner), use a bordered element inside a clipped container.

HTML:

<div class="progress-ring">
  <div class="progress-fill"></div>
</div>

CSS:

.progress-ring {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: #e0e0e0;
  position: relative;
}

.progress-fill {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  clip: rect(0px, 100px, 100px, 50px);
  background: #4caf50;
  transform: rotate(135deg); /* Start from top */
}

.progress-fill::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  clip: rect(0px, 50px, 100px, 0px);
  background: #4caf50;
  transform: rotate(90deg); /* Adjust based on progress */
  transform-origin: 50% 50%;
}

To animate this with a specific percentage (e.g., 60%), you’d calculate the rotation angle: 360 * (progress / 100). You can update this via JavaScript by modifying the transform: rotate() value on .progress-fill::before.

3. Add animation and smooth transitions

To make the bar animate smoothly when the progress changes, use CSS transitions. However, conic-gradient and clip aren't directly animatable, so you can animate the transform: rotate() on the fill element.

Example with animation:

.progress-fill::before {
  transition: transform 0.5s ease;
}

Then update the rotation via JavaScript:

const fill = document.querySelector('.progress-fill::before');
// Not directly possible — instead, use a wrapper or class toggle

A better approach: wrap the fill in a container and rotate it:

<div class="progress-ring">
  <div class="progress-mask">
    <div class="progress-fill"></div>
  </div>
</div>

.progress-mask {
  position: absolute;
  width: 100%;
  height: 100%;
  clip: rect(0, 100px, 100px, 50px);
  transform: rotate(0deg); /* Controlled by JS */
}

.progress-fill {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: #4caf50;
}

Now use JavaScript to set rotation:

function setProgress(percent) {
  const rotateDeg = percent * 3.6; // 360 / 100
  document.querySelector('.progress-mask').style.transform = 
    `rotate(${rotateDeg}deg)`;
}

4. Customize appearance

• Change the ring thickness by adjusting the inner cutout or using a border instead.
• Add a label in the center using a child element.
• Support theming with CSS variables:

  .circular-progress {
    --progress: 50%;
    --fg-color: #4caf50;
    --bg-color: #e0e0e0;
    background: conic-gradient(
      var(--fg-color) var(--progress),
      var(--bg-color) var(--progress)
    );
  }

  Basically, it's a mix of clever gradients, clipping, and rotation. The conic-gradient method is simplest for static or JS-updated values. For smoother animations, the clip-path rotate method gives more control. Pick based on your browser support and animation needs.

  以上是如何使用CSS创建圆形进度栏的详细内容。更多信息请关注PHP中文网其他相关文章！