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:

'use client';

import { Spinner } from 'flowbite-react';

Table of Contents#

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
  • React TypeScript
'use client';

import { Spinner } from 'flowbite-react';

export default function DefaultSpinner() {
  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
  • React TypeScript
'use client';

import { Spinner } from 'flowbite-react';

export default function Colors() {
  return (
    <>
      <Spinner
        aria-label="Info spinner example"
        color="info"
      />
      <Spinner
        aria-label="Success spinner example"
        color="success"
      />
      <Spinner
        aria-label="Failure spinner example"
        color="failure"
      />
      <Spinner
        aria-label="Warning spinner example"
        color="warning"
      />
      <Spinner
        aria-label="Pink spinner example"
        color="pink"
      />
      <Spinner
        aria-label="Purple spinner example"
        color="purple"
      />
    </>
  )
}

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
  • React TypeScript
'use client';

import { Spinner } from 'flowbite-react';

export default function Sizing() {
  return (
    <>
      <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"
      />
    </>
  )
}

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
  • React TypeScript
'use client';

import { Spinner } from 'flowbite-react';

export default function Alignment() {
  return (
    <>
      <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>
    </>
  )
}

Loading buttons#

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

Edit on GitHub
  • React TypeScript
'use client';

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

export default function Buttons() {
  return (
    <>
      <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>
    </>
  )
}

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": "w-3 h-3",
    "sm": "w-4 h-4",
    "md": "w-6 h-6",
    "lg": "w-8 h-8",
    "xl": "w-10 h-10"
  }
}

References#