CSS3扇形进度效果

.coutdown-animate {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 50%;
    opacity: 0.3;
    &:before {
      content: "";
      display: block;
      margin-left: 50%;
      height: 100%;
      background-color: inherit;
      color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 0 50px 50px 0;
      transform-origin: left;
    }
    &.animate {
      background: #000;
      background-image: linear-gradient(to right, transparent 50%, #9acd32 0);
      &:before{
        animation: spin 1.5s linear infinite, bg 3s step-end infinite;
      }
    }
  }
 
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(180deg);
  }
}
@keyframes bg {
  50% {
    background: #9acd32;
  }
}
 
原文地址:https://www.cnblogs.com/hutuzhu/p/11758411.html