PUG/JADE(HTML 전처리기)

.wrapper 
 - for(var i = 0; i < 21; i++)
   span 

SCSS(CSS 전처리기)

body{
  margin: 0;
  padding: 0;
  min-height: 100vh;
  @mixin j-center{
    display: flex;
    justify-content: center;
    align-items: center;
  }
  @include j-center;
  .wrapper{
    $s: 40vmin;
    width: $s;
    height: $s;

    position: relative;
    span{
      display: block;
      width: inherit;
      height: inherit;
      position: absolute;
      top: 0;
      left: 0;
    //  border: solid red;

      @for $i from 1 through 22{
        &:nth-child(#{$i}){
          transform: rotate(calc(#{$i} * 20deg));

          animation: 2s linear animate infinite;
      opacity: 0;
      @keyframes animate{
        0%{
          opacity: 0;
        }
        100%{
          opacity: 1;
        }
      }
          animation-delay: #{$i * .1}s;
          &:not(:last-child)::after{
            content: '';
            $s: 10px;
            width: $s;
            height: $s;
            position: absolute;
            background: red;
            border-radius: 50%;
          }


        }
        &:last-child{
          animation: 2s linear lastchild infinite!important;
          opacity: 1!important;
          @keyframes lastchild{
            0%{
              transform: rotate(0deg) scale(1.1);
            }
            100%{
              transform: rotate(360deg) scale(1.1);
            }
          }
          &::after{
            content: '\f072';
            $s: 20px;
            width: $s;
            height: $s;
            position: absolute;
            font-family: "Font Awesome 5 Free";
            font-weight: 900;
            color: #555;
            transform: scale(2)
          }
          }
        }
    }
  }
}