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.

<Spinner aria-label="Default status example" />
<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"
/>
<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 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>
<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>