DEV Community

Cover image for Custom react loading screen with tailwindcss
Dennis kinuthia
Dennis kinuthia

Posted on

Custom react loading screen with tailwindcss

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


Enter fullscreen mode Exit fullscreen mode

and call it like

<Loading size={35}/>

Enter fullscreen mode Exit fullscreen mode

viola

full project code
live preview

Top comments (0)