loading Animation

loading Animation

codepen에서 로딩하는 애니메이션을 만들었습니다.

01. HTML

총 10개의 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 class="ball"></div>
</div>

02. css

정 가운데로 오게 만들고 애니메이션 딜레이를 주어 하나씩 움직이게 만들어줍니다.

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