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;

  }

}