React Spinner (Loader) - Flowbite
The spinner component should be used to indicate a loading status of the content that you're fetching from your database and you can choose from multiple styles, colors, sizes, and animations based on React and Tailwind CSS.
Import the spinner component from Flowbite React to start using it in your project:
import { Spinner } from "flowbite-react";
Default spinner#
Use the default spinner element by adding the <Spinner> React component inside your code and integrate the aria-label attribute to allow screen readers parse the component for accessibility.
Spinner colors#
Update the colors of the loading spinner by using the color React prop.
Sizing options#
Make the size of the spinner smaller or larger by using the size prop. Choose from xs, sm, md, lg, or xl.
Alignment#
Align the spinner to the left, center or right side of the page by using the utility classes from Tailwind CSS.
Loading buttons#
Add the loading spinner inside a button to indicate fetching status directly inside form submission buttons.
Theme#
To learn more about how to customize the appearance of components, please see the Theme docs.
{
"base": "inline animate-spin text-gray-200",
"color": {
"default": "fill-primary-600",
"failure": "fill-red-600",
"gray": "fill-gray-600",
"info": "fill-cyan-600",
"pink": "fill-pink-600",
"purple": "fill-purple-600",
"success": "fill-green-500",
"warning": "fill-yellow-400"
},
"light": {
"off": {
"base": "dark:text-gray-600",
"color": {
"default": "",
"failure": "",
"gray": "dark:fill-gray-300",
"info": "",
"pink": "",
"purple": "",
"success": "",
"warning": ""
}
},
"on": {
"base": "",
"color": {
"default": "",
"failure": "",
"gray": "",
"info": "",
"pink": "",
"purple": "",
"success": "",
"warning": ""
}
}
},
"size": {
"xs": "h-3 w-3",
"sm": "h-4 w-4",
"md": "h-6 w-6",
"lg": "h-8 w-8",
"xl": "h-10 w-10"
}
}