Custom react loading screen with tailwindcss

#tailwindcss #react #minimal #loading

tailwind css has an animate class which you can use to accomplish some fun things

minimal custom react loading screen

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>
);
}