tailwindcss를 사용한 사용자 지정 반응 로딩 화면

tailwind css에는 몇 가지 재미있는 작업을 수행하는 데 사용할 수 있는 animate 클래스가 있습니다.

최소 사용자 지정 반응 로딩 화면

import React from 'react'

interface LoadingProps {
size:number
}

export const Loading: React.FC<LoadingProps> = ({size}) => {

return (
  <div className="w-[50%]  flex-center h-10">
    <div
      style={{ width: `${size}px`, height: `${size}px` }}
      className="animate-spin">
      <div className="h-full w-full border-4 border-t-purple-500
       border-b-purple-700 rounded-[50%]">
      </div>
    </div>
  </div>
);
}

그리고 그것을 다음과 같이 부르십시오

<Loading size={35}/>

비올라

full project code
live preview