.progress {
  --border: 2px;
  --size: 34px; /* 圆圈的尺寸 不包含 border  */
  --border-color: white;
  overflow: hidden;
  width: calc(var(--border) * 2 + var(--size));
  height: calc(var(--border) * 3 + var(--size));
  position: relative;
}
.progress::after {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 1);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.progress-active .circle {
  border-width: var(--border) !important;
}
.progress-active::after {
  background: var(--border-color) !important;
}

.progress .wrapper-circle {
  overflow: hidden;
  width: 50%;
  height: 100%;
}

.left {
  float: left;
}

.right {
  float: right;
}

.progress .circle {
  border-radius: 50%;
  width: var(--size);
  height: var(--size);
}

.progress .left .circle {
  float: left;
  border: 0px solid var(--border-color);
  border-top-color: transparent;
  border-left-color: transparent;
  animation: left_cirlce 5s linear forwards;
  box-sizing: content-box;
}

.progress .right .circle {
  box-sizing: content-box;
  float: right;
  border: 0px solid var(--border-color);
  border-top-color: transparent;
  border-right-color: transparent;
  animation: right_cirlce 5s linear forwards;
}

@keyframes left_cirlce {
  0%, 50% {
    transform: rotate(-45deg);
  }
  100% {
    transform: rotate(135deg);
  }
}
@keyframes right_cirlce {
  0% {
    transform: rotate(45deg);
  }
  50%, 100% {
    transform: rotate(225deg);
  }
}/*# sourceMappingURL=spin-circle.css.map */<!--0.00028800964355469-->