body {
  display: flex;
  height: 100vh;
  justify-content: center;
  align-items: center;
  background: #b3e5fc;
}

.mawaru {
  position: relative;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;

  .circle {
    // https://coolors.co
    $circle-colors: #50514F,
      #F25F5C,
      #FFE066,
      #247BA0,
      #70C1B3,
      #1D3557,
      #88ABC0,
      #FFCDB2;

    position: absolute;
    background: conic-gradient(var(--color1) var(--pos), var(--color2) 0);
    border-radius: 50%;

    @for $i from 1 through 8 {
      &:nth-child(#{$i}) {
        $color1: nth($circle-colors, $i);
        --color1: #{$color1};

        z-index: 8 - $i;
        width: 4em * $i;
        height: 4em * $i;
        // Use step-end to switch color2 and color1 every time the first pos animation finished.
        animation: pos 0.6s linear,
        color1 1.2s step-end,
        color2-#{$i} 1.2s step-end;
        animation-iteration-count: 2;
        animation-delay: 0.4s * $i;
      }

      @keyframes color2-#{$i} {
        50% {
          --color2: #{nth($circle-colors, $i)};
        }
      }
    }
  }
}

@keyframes pos {
  to {
    --pos: 100%;
  }
}

@keyframes color1 {
  50% {
    --color1: transparent;
  }
}