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 (0)