[CSS] 로딩 애니메이션

출처 : https://studiomeal.com/archives/177

로딩 애니메이션, CSS로 만들어보자

@keyframes spin {
  100% {
	  transform: rotate(360deg);
  }
}
.spinner {
  display: inline-block;
  width: 50px;
  height: 50px;
  border: 5px solid yellow;
  border-color: yellow transparent transparent;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

<div class="spinner"></div>

 

이렇게 쉽게 할 수가 있구나.... 역시 많이 배우고 해야 한다.