React Spinner (Loader) - Flowbite

Indicate a loading status when fetching data by using the spinner component built with React and animated with Tailwind CSS based on multiple colors and sizes

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.

Edit on GitHub
"use client";

import { Spinner } from "flowbite-react";

function Component() {
  return <Spinner aria-label="Default status example" />;
}

Spinner colors#

Update the colors of the loading spinner by using the color React prop.

Edit on GitHub
"use client";

import { Spinner } from "flowbite-react";

function Component() {
  return (
    <div className="flex flex-wrap gap-2">
      <Spinner color="info" aria-label="Info spinner example" />
      <Spinner color="success" aria-label="Success spinner example" />
      <Spinner color="failure" aria-label="Failure spinner example" />
      <Spinner color="warning" aria-label="Warning spinner example" />
      <Spinner color="pink" aria-label="Pink spinner example" />
      <Spinner color="purple" aria-label="Purple spinner example" />
    </div>
  );
}

Sizing options#

Make the size of the spinner smaller or larger by using the size prop. Choose from xs, sm, md, lg, or xl.

Edit on GitHub
"use client";

import { Spinner } from "flowbite-react";

function Component() {
  return (
    <div className="flex flex-wrap items-center gap-2">
      <Spinner aria-label="Extra small spinner example" size="xs" />
      <Spinner aria-label="Small spinner example" size="sm" />
      <Spinner aria-label="Medium sized spinner example" size="md" />
      <Spinner aria-label="Large spinner example" size="lg" />
      <Spinner aria-label="Extra large spinner example" size="xl" />
    </div>
  );
}

Alignment#

Align the spinner to the left, center or right side of the page by using the utility classes from Tailwind CSS.

Edit on GitHub
"use client";

import { Spinner } from "flowbite-react";

function Component() {
  return (
    <div className="flex flex-wrap gap-2">
      <div className="text-left">
        <Spinner aria-label="Left-aligned spinner example" />
      </div>
      <div className="text-center">
        <Spinner aria-label="Center-aligned spinner example" />
      </div>
      <div className="text-right">
        <Spinner aria-label="Right-aligned spinner example" />
      </div>
    </div>
  );
}

Loading buttons#

Add the loading spinner inside a button to indicate fetching status directly inside form submission buttons.

Edit on GitHub
"use client";

import { Button, Spinner } from "flowbite-react";

function Component() {
  return (
    <div className="flex flex-row gap-3">
      <Button>
        <Spinner aria-label="Spinner button example" size="sm" />
        <span className="pl-3">Loading...</span>
      </Button>
      <Button color="gray">
        <Spinner aria-label="Alternate spinner button example" size="sm" />
        <span className="pl-3">Loading...</span>
      </Button>
    </div>
  );
}

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": {
    "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": {
        "failure": "",
        "gray": "dark:fill-gray-300",
        "info": "",
        "pink": "",
        "purple": "",
        "success": "",
        "warning": ""
      }
    },
    "on": {
      "base": "",
      "color": {
        "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"
  }
}

References#