使用 css3 实现圆形进度条的示例

下面是使用css3实现圆形进度条的完整攻略：

准备工作

在开始制作圆形进度条之前，需要准备一些基本的HTML和CSS文件。在HTML中创建一个空的div元素，并为其指定一个class名，例如"progress-bar"。接着，在CSS中对这个div元素进行一些基本的样式定义，例如设置它的宽度、高度和边框等。

Example 1

我们先来看一下制作圆形进度条的第一个例子：

HTML文件代码

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

CSS文件代码

.progress-bar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 10px solid #ddd;
  box-sizing: border-box;
}
.progress-bar::before {
  content: "";
  display: block;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 10px solid #6cbdc8;
  box-sizing: border-box;
}

代码说明

• .progress-bar是我们在HTML中创建的div元素的class名。
• 在CSS中，我们为.progress-bar设置了宽度、高度、边框的形状（border-radius），以及边框的宽度和颜色。
• 使用了伪元素::before来创建一个和div元素同样形状但半径较小的圆形元素，为其设置不同的颜色，作为进度条的进度部分。
• 对于::before元素，在它的width和height属性上设置为该进度条应该显示的进度百分比即可。

Example 2

下面我们再来看一下制作圆形进度条的第二个例子：

HTML文件代码

<div class="progress-bar">
  <div class="progress">
    <div class="percent"></div>
  </div>
</div>

CSS文件代码

.progress-bar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 10px solid #ddd;
  box-sizing: border-box;
  position: relative;
}
.progress {
  position: absolute;
  top: -10px;
  left: -10px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  clip: rect(0, 120px, 120px, 60px);
}
% /* clip属性可以按照设定的尺寸以及一定的规则剪裁元素的内容，这里的规则是指超出尺寸范围的内容会被截掉 */
.progress .percent {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 80px;
  height: 80px;
  margin-top: -40px;
  margin-left: -40px;
  border-radius: 50%;
  background-color: #6cbdc8;
  box-sizing: border-box;
  text-align: center;
  line-height: 80px;
  font-size: 24px;
  font-weight: bold;
}

代码说明

• 与Example 1不同，使用一个包裹元素.progress代表进度条元素。其中包含一个.percent元素作为进度显示的标志，宽高和.progress一致
• 这里同时设置了clip属性剪切.progress元素，以实现剪切的效果。剪切效果是根据元素的位置和宽高来定位，剪切出对应效果的圆形区域。
• 使用立体的border-radius以及设置不同的后续颜色，可以制作出更多更美观的进度条，除此之外也可将进度条增加动画或其他附加效果。

综上，以上两条示例分别通过::before伪元素和clip属性讲解了css3实现圆形进度条的方法，除此之外还可以制作出更多更美观的进度条，例如增加动画等。