CSS를 통해 로딩화면 만들어보기 : 가운데를 중심으로 돌아가는 원들

공이 돌아가는 애니메이션을 구현해보자~!

공이 .ball 클래스를 중심으로 .ball:after가 360도로 돌아가는 효과를 구현해보도록 하겠습니다.
기대되는 마음을 품고 가~~~~~~보자고

---

HTML 코드

공이 돌아갈 수 있게 공들을 .ball 클래스를 적어 만들어주었어요!

<div class="loader">
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
  </div>

---

CSS 코드

사실상 이번 예제의 핵심인데 아래의 사항들을 생각하며 만들어 주시면 되더라구요!
1. .ball 클래스는 absolute로 설정해 중심을 각각 top,left,transform을 통해 가운데로 중심을 잡고 2. 그 .ball 클래스의 원을 :after를 이용해 생성해줍니다 3. .ball 주위를 돌아갈 수 있게 떨어트리기 위해서 :after에 absolute를 설정해 top을 0으로 설정해 떨어트려 만들어 줍니다

body {
    background-color: rgba(100,20,240,0.7);
  }
  .loader {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100px;
    height: 100px;
    animation: spin .6s linear infinite reverse;
  }
  .ball {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 100%;
    animation: spin 1s infinite ease-in-out;
  }
  
  .ball:after {
    position: absolute;
    content: '';
    background-color: #fff;
    width: 5px;
    height: 5px;
    border-radius: 100%;
    top: 0;
  }
  .ball:nth-child(2) {
    animation-delay: -0.1s;
  }
  .ball:nth-child(3) {
    animation-delay: -0.2s;
  }
  .ball:nth-child(4) {
    animation-delay: -0.3s;
  }
  .ball:nth-child(5) {
    animation-delay: -0.4s;
  }
  .ball:nth-child(6) {
    animation-delay: -0.5s;
  }
  .ball:nth-child(7) {
    animation-delay: -0.6s;
  }
  .ball:nth-child(8) {
    animation-delay: -0.7s;
  }
  .ball:nth-child(9) {
    animation-delay: -0.8s;
  }
  .ball:nth-child(10) {
    animation-delay: -0.9s;
  }
  
  @keyframes spin {
    0% {
      transform: translate(-50%, -50%) rotate(0deg);
    }
    100% {
      transform: translate(-50%, -50%) rotate(360deg);
    }
  }

---

왼성~!~!~!~!

가운데를 중심으로 원들이 돌아가면서 로딩화면을 만들다니 너무 신기하지 않나요?
신기하지 않아도 신기해 하십쇼.