[css] loading bar css with tailwind, 로딩이 필요한 경우 (ft. tailwind)

loading bar css

 

tailwind, css로 작업한

간단한 로딩바입니다.

 

구현 화면

 

구현 영상

 

로딩이 필요한 이유

loading은 보통 결과값이 도출 되기 이전에 몇 초 동안 실행하여 사용자가 대기중 임을 인지할 수 있도록
UX로서 필요합니다. 

또한 react에서 비동기로 데이터를 가지고 올 경우, 결과 값에 데이터가 들어오기 전에 화면이 먼저 렌더링 되면서 null값인 상태에 에러를 발생시키므로 결과값에 데이터가 들어오기 전에는 loading을 실행하여 에러를 방지합니다. 

 

html

 <div className="flex flex-col h-screen gap-8 justify-center text-center">
   <div className="mx-auto">
     <div className=" flex justify-center items-center mb-6">
       <div className="loader ease-linear rounded-full border-8 border-t-8 
       border-gray-200 h-28 w-28"></div>
     </div>
   </div>
 </div>

 

css

/* spinner */
.loader {
  border-top-color: #FFE9A4;
  -webkit-animation: spinner 1.5s linear infinite;
  animation: spinner 1.5s linear infinite;
}

@-webkit-keyframes spinner {
  0% {
    -webkit-transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes spinner {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}