css实现圆环进度

主要通过内置 style 定义 css 变量实现的进度效果。

<style>
.zh-percent {
  position: relative;
  width: 60px;
  height: 60px;
}
.zh-percent::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--percent-color);
}
.zh-percent::before {
  content: "";
  display: block;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  background-color: #fff;
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.zh-percent .zh-text {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 14px;
}

</style>

<div class="zh-percent" style="--percent-color: conic-gradient(#00AE66 0, #00AE66 30%, #046040 30%, #046040)">
  <span class="zh-text"><strong>30</strong>%</span>
</div>

样式少，但有锯齿的效果。

<style>
.zh-percent2 {
  position: relative;
  width: 60px;
  height: 60px;
}
.zh-percent2::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--percent-color);
  -webkit-mask: radial-gradient(transparent, transparent 50%, #fff 50%, #fff 0);
}
.zh-percent2 .zh-text {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 14px;
}
</style>

<div class="zh-percent2" style="--percent-color: conic-gradient(#00AE66 0, #00AE66 30%, #046040 30%, #046040)">
  <span class="zh-text"><strong>30</strong>%</span>
</div>