Loaing spinner

css만을 통해서 로딩스피너를 구현하는 법을 배웠다.

• animation을 이용.
• animation에 대한 좀더 세부적인 부분은 keyframes를 사용

예시코드

.spinner {
  width: 100px;
  height: 100px;
  border: 10px solid gray;
  border-radius: 50%;
  border-top: 10px solid blue;
  animation: spin 2s linear infinite;
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.spinner 선택자에 animation 을 주는데 spin은 keyframes를 위한 커스텀이다.
animation은 2초동안 linear하게 무한으로 실행될것이다.

spin은 keyframes에서 정의한대로 0%에서는 0deg를 돌고
100%에서는 360deg를 돌며 로딩스피너를 완성했다.

• 로딩스피너 구현하는법을 몰랐는데 알게됨
• 무조건 외부 라이브러리를 통해 로딩스피너를 만들어야되는줄 알았다.