DEV Community

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

Posted on

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

Collapse
 
jill_builds_apps profile image
Jill Mercer •

nothing kills the vibe like a blank screen while your data fetches. tailwind's animate classes are a lifesaver for shipping fast — i usually stick with pulse for skeleton loaders to keep things light. simple enough to ship, but looks pro enough to trust. austin taught me: just start the thing.