圆形进度条 HTML CSS

在 Web 开发中，圆形进度条通常用于展示某个任务、进度或状态的百分比完成情况。本文将介绍如何使用 HTML 和 CSS 实现一个简单的圆形进度条。

HTML 结构

首先，我们需要在 HTML 文件中创建一个容器元素，并在其中嵌套一个 <div> 元素，用于展示进度条的进度。

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

以上代码中，外层的 .progress-container 用于容纳进度条，内层的 .progress 则是用于展示进度的元素。

CSS 样式

接下来，我们需要在 CSS 文件中为进度条添加样式。

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

.progress {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #f5f5f5;
}

.progress::before {
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #0e90d2;
  transform-origin: center;
  transform: rotate(0deg);
}

.progress::after {
  content: "";
  width: 50%;
  height: 100%;
  border-radius: 0 100% 100% 0 / 50% 50%;
  position: absolute;
  top: 0;
  left: 50%;
  background-color: #f5f5f5;
  transform-origin: left;
  transform: rotate(0deg);
  z-index: -1;
}

以上代码中，我们为容器元素 .progress-container 设置了宽度和高度，并设置了 position: relative。这是为了让内部的进度元素 .progress 相对于容器元素定位。

进度元素 .progress 设置了宽度、高度和圆角，同时将其 position 设为 absolute，并设置 top: 0 和 left: 0，使其覆盖整个容器元素。背景颜色暂设为灰色 #f5f5f5。

接下来，为 .progress 添加伪元素 ::before 和 ::after，分别用于展示进度和背景。它们也都设置了宽度、高度、圆角和位置，不过 ::before 使用了背景颜色 #0e90d2，而 ::after 使用了背景颜色 #f5f5f5。

最后，我们使用 transform 属性来旋转 ::before 和 ::after。它们的 transform-origin 分别设置为中心点和左边缘，使它们的旋转效果呈现一个扇形。我们将 ::before 的旋转角度与进度百分比相关联来更新。

JavaScript 实现

最后，我们需要使用 JavaScript 来动态更新进度条的进度。这里使用了 jQuery 库来简化代码。

var percent = 50; // 设置进度百分比

$(".progress").css("transform", "rotate(" + percent / 100 * 360 + "deg)");

以上代码中，我们首先设置了进度百分比 percent，然后通过 CSS 设置 .progress 的 transform 属性来进行旋转。进度条的最大值是 100，因此我们需要将百分比转换为 0 到 360 度之间的角度。

总结

通过 HTML、CSS 和 JavaScript，我们可以轻松地实现一个简单的圆形进度条。当然，我们还可以进行更多的样式定制，比如改变颜色、加入动画等等，以满足不同的需求。