loading Animation

loading

작은 원 10개가 돌면서 loading 화면 처럼 보이는 애니메이션을 만들어봅시다.

---

HTML

원을 여러개 만들어줍니다.

<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

reverse : 애니메이션을 역방향으로 재생한다. 재생이 한 번 끝나면 마지막 프레임부터 다시 시작한다.
ease-in-out : 애니메이션 효과가 천천히 시작되어, 천천히 끝납니다.
transform 속성을 이용해 요소에 이동 효과(X , Y축으로 각각 -50%씩)를 부여하면, 시각적으로 가운데에 위치

 body{
    background-color: rgb(105, 54, 199);
}

.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:0px;
} 


.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);
}
}

결과

See the Pen loading by kimyihyung (@kimyihyung) on CodePen.