Documentation

HTML
Vue
Laravel
React
Tailwind
Angular
CodeIgniter

Requirements
File Structure

Basic
React

Favicon
Loading Transitions
Logo
Changing Fonts
Layout Configure
Sidebar and Header

Disable Form
Sizing
Input Group
Alternate Input
Floating Label
Alternate Float Label
Toggle Button
Validation

Tyography
Images
Tables
Figures

AOS Animation
Datepicker
Circle Progress
CounterUp
NoUiSlider
Data Table
Source & Credits
Upgrade Guide
Change Log

Spinners

Indicate the loading state of a component or page with Bootstrap spinners, built entirely with HTML, CSS, and no JavaScript.

Border spinner

Use the border spinners for a lightweight loading indicator.

<Spinner animation="border" role="status">
    <span className="visually-hidden">Loading...</span>
</Spinner>

Colors

The border spinner uses currentColor for its border-color, meaning you can customize the color with text color utilities.


<Spinner animation="border" variant="primary" role="status">
<span className="visually-hidden">Loading...</span>
</Spinner>
<Spinner animation="border" variant="secondary" role="status">
<span className="visually-hidden">Loading...</span>
</Spinner>
<Spinner animation="border" variant="success" role="status">
<span className="visually-hidden">Loading...</span>
</Spinner>
<Spinner animation="border" variant="danger" role="status">
<span className="visually-hidden">Loading...</span>
</Spinner>
<Spinner animation="border" variant="warning" role="status">
<span className="visually-hidden">Loading...</span>
</Spinner>
<Spinner animation="border" variant="info" role="status">
<span className="visually-hidden">Loading...</span>
</Spinner>
<Spinner animation="border" variant="light" role="status">
<span className="visually-hidden">Loading...</span>
</Spinner>
<Spinner animation="border" variant="dark" role="status">
<span className="visually-hidden">Loading...</span>
</Spinner>

Growing spinner

If you don’t fancy a border spinner, switch to the grow spinner. 


<Spinner animation="grow"  role="status">
        <span className="visually-hidden">Loading...</span>
</Spinner>


<Spinner animation="grow"  variant="primary" role="status">
  <span className="visually-hidden">Loading...</span>
</Spinner>
<Spinner animation="grow"  variant="secondary" role="status">
  <span className="visually-hidden">Loading...</span>
</Spinner>
<Spinner animation="grow"  variant="success" role="status">
  <span className="visually-hidden">Loading...</span>
</Spinner>
<Spinner animation="grow"  variant="danger" role="status">
  <span className="visually-hidden">Loading...</span>
</Spinner>
<Spinner animation="grow"  variant="warning" role="status">
  <span className="visually-hidden">Loading...</span>
</Spinner>
<Spinner animation="grow"  variant="info" role="status">
  <span className="visually-hidden">Loading...</span>
</Spinner>
<Spinner animation="grow"  variant="light" role="status">
  <span className="visually-hidden">Loading...</span>
</Spinner>
<Spinner animation="grow"  className="dark" role="status">
  <span className="visually-hidden">Loading...</span>
</Spinner>

Alignment

Spinners in Bootstrap are built with rems, currentColor, and display: inline-flex. This means they can easily be resized, recolored, and quickly aligned.

Margin


<Spinner animation="grow"  variant="primary" role="status">
  <span className="visually-hidden">Loading...</span>
</Spinner>
<Spinner animation="grow"  variant="secondary" role="status">
  <span className="visually-hidden">Loading...</span>
</Spinner>
<Spinner animation="grow"  variant="success" role="status">
  <span className="visually-hidden">Loading...</span>
</Spinner>
<Spinner animation="grow"  variant="danger" role="status">
  <span className="visually-hidden">Loading...</span>
</Spinner>
<Spinner animation="grow"  variant="warning" role="status">
  <span className="visually-hidden">Loading...</span>
</Spinner>
<Spinner animation="grow"  variant="info" role="status">
  <span className="visually-hidden">Loading...</span>
</Spinner>
<Spinner animation="grow"  variant="light" role="status">
  <span className="visually-hidden">Loading...</span>
</Spinner>
<Spinner animation="grow"  className="dark" role="status">
  <span className="visually-hidden">Loading...</span>
</Spinner>

Placement

Use flexbox utilities, float utilities, or text alignment utilities to place spinners exactly where you need them in any situation.

Flex

<Spinner animation="border" role="status">
  <span className="visually-hidden">Loading...</span>
</Spinner>
Floats

<Spinner animation="border" className="float-end" role="status">
  <span className="visually-hidden">Loading...</span>
</Spinner>
Text align

<Spinner animation="border" role="status">
  <span className="visually-hidden">Loading...</span>
</Spinner>

Size

Add .spinner-border-sm and .spinner-grow-sm


<Spinner animation="border" size="sm" role="status">
  <span className="visually-hidden">Loading...</span>
</Spinner>{' '}
<Spinner animation="grow" size="sm" role="status">
  <span className="visually-hidden">Loading...</span>
</Spinner>

Buttons

Use spinners within buttons to indicate an action is currently processing or taking place.

<Button variant="primary" disabled>
    <Spinner as="span" animation="border" size="sm" role="status" aria-hidden="true"></Spinner>
    <span className="visually-hidden">Loading...</span>
</Button>{' '}
<Button variant="primary" type="button" disabled>
    <Spinner as="span"  animation="border" size="sm" role="status" aria-hidden="true"></Spinner>
    Loading...
</Button>

<Button variant="primary" disabled>
    <Spinner as="span" animation="grow" size="sm" role="status" aria-hidden="true"></Spinner>
    <span className="visually-hidden">Loading...</span>
</Button>{' '}
<Button variant="primary" type="button" disabled>
    <Spinner as="span"  animation="grow" size="sm" role="status" aria-hidden="true"></Spinner>
    Loading...
</Button>