动态绘制一个整的圆饼效果

<div class=”pie”></div>

@keyframes spin {

        to {

          transform: rotate(0.5turn);

        }

      }

      @keyframes bg {

        50% {

          background: #655;

        }

      }

      .pie {

        width: 200px;

        height: 200px;

        border-radius: 50%;

        background: yellowgreen;

        background-image: linear-gradient(to right, transparent 50%, #655 0);

      }

      .pie::before {

        content: “”;

        display: block;

        margin-left: 50%;

        height: 100%;

        border-radius: 0 100% 100% 0 / 50%;

        background-color: inherit;

        transform-origin: left;

        animation: spin 2s linear infinite, bg 4s step-end infinite;

      }

<svg width=”200″ height=”200″>

      <circle r=”100″ cx=”100″ cy=”100″ />

</svg>

@keyframes fillup {

        from {

          stroke-dasharray: 0 628;

        }

        to {

          stroke-dasharray: 628 628;

        }

      }

      svg {

        transform: rotate(-90deg);

        border-radius: 50%;

      }

      circle {

        fill: yellowgreen;

        stroke: #655;

        stroke-width: 200;

        animation: fillup 4s linear infinite;

      }