css倒计时 逐渐填充的圆，可自定义秒数

<div class="circle">
          <div class="semi semi1">
            <div class="inner" :style="{ animationDuration:  30 + 's'}"></div>
          </div>
          <div class="semi semi2">
            <div class="inner"  :style="[{ animationDuration:  30 + 's'},{animationDelay:  30 + 's'}]"></div>
          </div>
        </div>

.circle {
  width: 200px;
  height: 200px;
  border-radius: 100px;
  position: relative;
}
.semi {
  position: absolute;
  width: 200px;
  height: 200px;
  border-radius: 100px;
  background-color: #fff;
  clip: rect(0 200px 200px 100px);
}
.semi .inner {
  position: absolute;
  width: 200px;
  height: 200px;
  border-radius: 100px;
  background-color: #f00;
  clip: rect(0 100px 200px 0);
}

.semi2 {
  clip: rect(0 100px 200px 0);
}
.semi2 .inner {
  clip: rect(0 200px 200px 100px);
}
@keyframes sector {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(180deg);
  }
}
.semi1 .inner {
  animation: sector 5s linear 0s forwards;
}
.semi2 .inner {
  animation: sector 5s linear 5s forwards;
}