React Spinner (Loader) - Flowbite

Use the spinner component as a loader indicator in your projects when fetching data based on an animated SVG

The spinner component can be used as a loading indicator which comes in multiple colors, sizes, and styles separately or inside elements such as buttons to improve the user experience whenever data is being fetched from your server.

Default spinner

<Spinner aria-label="Default status example" />

Colors

<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

<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

<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>

Buttons

<Button>
  <Spinner aria-label="Spinner button example" />
  <span className="pl-3">
    Loading...
  </span>
</Button>
<Button color="gray">
  <Spinner aria-label="Alternate spinner button example" />
  <span className="pl-3">
    Loading...
  </span>
</Button>