[分享]css写一个圆形进度条

圆形进度条是Web应用程序中常用的进度条之一，它可以在用户使用Web应用程序时显示进度。在CSS中，我们可以使用伪元素来绘制一个圆形进度条。下面是一个简单的例子：.progress { : relat...

圆形进度条是Web应用程序中常用的进度条之一，它可以在用户使用Web应用程序时显示进度。在CSS中，我们可以使用伪元素来绘制一个圆形进度条。下面是一个简单的例子：

.progress {
  position: relative;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: lightgray;
}
.progress::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  clip: rect(0, 50px, 100px, 0);
  background-color: #007bff;
  transform: rotate(90deg);
} 

在这个例子中，我们使用一个div元素来表示进度条。通过设置它的宽度和高度，并将边框半径设置为50%，我们可以将其变成一个圆。我们还设置了背景颜色为lightgray，以增加可读性。

接下来，我们使用伪元素::before来绘制进度条。我们将其位置设置为相对于.parent元素的absolute，并将其大小设置为相同的宽度和高度。我们还将边框半径设置为50%。clip属性用于剪辑圆形进度条，从而只显示50%的进度。背景颜色设置为#007bff，这也是进度条的颜色。最后，我们使用transform属性将伪元素旋转90度，以使其起始点位于顶部。

这是一个非常基本的例子，但你可以根据自己的需求来修改它。你可以将进度条变成一个完整的环，也可以添加动画效果来增加用户体验。