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

typescript

1import React from 'react'
2
3interface LoadingProps {
4size:number
5}
6
7export const Loading: React.FC<LoadingProps> = ({size}) => {
8
9return (
10  <div className="w-[50%]  flex-center h-10">
11    <div
12      style={{ width: `${size}px`, height: `${size}px` }}
13      className="animate-spin">
14      <div className="h-full w-full border-4 border-t-purple-500
15       border-b-purple-700 rounded-[50%]">
16      </div>
17    </div>
18  </div>
19);
20}
21
22

and call it like

typescript

1<Loading size={35}/>
2

viola

full project code live preview

Custom react loading screen with tailwindcss

Tanstack DB in action

Reasons to Still Use Next.js from a TanStack Start Enjoyer

🎨 TanStack Start SSR-Friendly Theme Provider

Custom react loading screen with tailwindcss

Tanstack DB in action

Reasons to Still Use Next.js from a TanStack Start Enjoyer

🎨 TanStack Start SSR-Friendly Theme Provider

minimal custom react loading screen

More posts

Tanstack DB in action

Reasons to Still Use Next.js from a TanStack Start Enjoyer

🎨 TanStack Start SSR-Friendly Theme Provider

More posts

Tanstack DB in action

Reasons to Still Use Next.js from a TanStack Start Enjoyer

🎨 TanStack Start SSR-Friendly Theme Provider

minimal custom react loading screen