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

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 (
    <>
      <ButtonComponent>
        <Spinner aria-label="Spinner button example" />
        <span className="pl-3">
          Loading...
        </span>
      </ButtonComponent>
      <ButtonComponent color="gray">
        <Spinner aria-label="Alternate spinner button example" />
        <span className="pl-3">
          Loading...
        </span>
      </ButtonComponent>
    </>
  )
}

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#