로딩 에니메이션 만들기

@2023/10/04

안녕하세요 lika-7입니다

이번시간에는 로딩 애니메이션을 만들겠습니다

코드

<div class="the-loader"></div>

.the-loader{
  width: 30px;
  height: 30px;
  margin: 30px auto;
  border: 4px solid red;
  border-top-color: transparent;
  border-radius: 50%;
  animation: loader 1s infinite linear;
}
@keyframes loader{
  0% {transform: rotate(0deg);}
  100% {transform: rotate(360deg);}
}

1. css로 border 속성으로 정사각형을 그림

2. 정사각형의 top은 투명 처리

3. border-radius로 정사각형을 원으로 만듬

4. @keyframes 로 시간 진행률을 나눔, 진행율에 따라 회전 시킴
   • 진행률이 1~100% 사이 일 때 0% 진행상황일 때 어떻게 표시하세요, 10% 진행되었으면 어떻게 표시하세요를 나타앰

5. animation 속성에 @keyframes으로 명시한 속성 추가하고 1초동안 움직이는 것으로, 무한정 움직이기, linear를 추가하여 에니메이션을 부드럽게 바꿈

동작