仅用 CSS 怎样创建环形进度条

在网页设计中，环形进度条是一种常见且实用的元素，它可以直观地展示任务的进度情况。本文将详细介绍如何仅使用 CSS 来创建环形进度条。

我们需要创建一个 HTML 结构来容纳进度条。可以使用一个<div>元素作为容器，然后在其中再创建两个<div>元素，一个用于背景圆环，一个用于表示进度的圆环。

<div class="progress-container">
  <div class="background-circle"></div>
  <div class="progress-circle"></div>
</div>

接下来，通过 CSS 来定义样式。对于容器，设置相对定位，以便内部的圆环能够相对于它进行定位。

.progress-container {
  position: relative;
  width: 200px;
  height: 200px;
}

背景圆环的样式可以这样设置：

.background-circle {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 2px solid #ccc;
}

进度圆环的样式相对复杂一些。通过transform: rotate()来实现旋转效果，根据进度的百分比来计算旋转的角度。

.progress-circle {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 2px solid #007bff;
  transform: rotate(0deg);
}

然后，通过 JavaScript 来动态更新进度圆环的旋转角度。假设我们有一个变量progress表示进度的百分比，可以这样计算旋转角度：

let progress = 50; // 假设进度为 50%
let angle = (progress / 100) * 360;
document.querySelector('.progress-circle').style.transform = `rotate(${angle}deg)`;

通过以上步骤，仅使用 CSS 和少量的 JavaScript ，就可以创建出一个简单而实用的环形进度条。在实际应用中，可以根据具体的需求进一步美化进度条的样式，如颜色、线条粗细等，以使其更好地融入网页的整体设计。

仅用 CSS 创建环形进度条不仅能够减少对 JavaScript 库的依赖，还能提高网页的加载速度和性能，为用户带来更流畅的体验。