1. 컴포넌트

  <div className='loading_spinner_box'>
     <div className='loading_spinner' />
  </div>

큰 div로 감싼 다음, 그 안에 작은 div를 하나 넣는다.
큰 div는 테두리 역할, 작은 div는 동그라미 역할인 셈이다.

2. css

          .loading_spinner_box {
            margin-left: 3px;

            .loading_spinner {
              width: 11px;
              height: 11px;
              border: 1.5px solid $gray-4;
              border-top: 1.5px solid $gray-10;
              border-radius: 50%;

              -webkit-animation: spin 1s linear infinite;
              animation: spin 1s linear infinite;

              @-webkit-keyframes spin {
                0% {
                  -webkit-transform: rotate(0deg);
                }
                100% {
                  -webkit-transform: rotate(360deg);
                }
              }

              @keyframes spin {
                0% {
                  transform: rotate(0deg);
                }
                100% {
                  transform: rotate(360deg);
                }
              }
            }
          }

border의 굵기가 매우 중요하다.
border는 동그라미의 배경색인 회색 부분(gray-4)이며, border-top은 동그라미의 강조되는 포인트인 검정색 부분(gray-10)이다.

애니메이션으로는 spin 효과가 빙글빙글 도는 것처럼 나타내 준다.