DEV Community

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

Posted on

2 1

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)

👋 Kindness is contagious

Dive into this insightful write-up, celebrated within the collaborative DEV Community. Developers at any stage are invited to contribute and elevate our shared skills.

A simple "thank you" can boost someone’s spirits—leave your kudos in the comments!

On DEV, exchanging ideas fuels progress and deepens our connections. If this post helped you, a brief note of thanks goes a long way.

Okay