Spinner

How it works

Indicate the loading state of a component or page with Bootstrap spinners, built entirely with HTML, CSS, and no JavaScript. Bootstrap “spinners” can be used to show the loading state in your projects. They’re built only with HTML and CSS, meaning you don’t need any JavaScript to create them. You will, however, need some custom JavaScript to toggle their visibility. Their appearance, alignment, and sizing can be easily customized with props.

Basic example

Use the border spinners for a lightweight loading indicator.

<x-spinner />

<span class="spinner-border"
      role="status"
      aria-hidden="true"><span class="visually-hidden">Loading...</span></span>

Grow example

If you don’t fancy a border spinner, switch to the grow spinner. While it doesn’t technically spin, it does repeatedly grow!

<x-spinner type="grow" />

<span class="spinner-grow"
      role="status"
      aria-hidden="true"><span class="visually-hidden">Loading...</span></span>

Colored example

The border spinner uses currentColor for its border-color, meaning you can customize the color with text color utilities. You can use any of Bootstrap text color utilities on the standard spinner.

<x-spinner color="primary" />
<x-spinner color="secondary" />
<x-spinner color="success" />
<x-spinner color="danger" />
<x-spinner color="warning" />
<x-spinner color="info" />
<x-spinner color="light" />
<x-spinner color="dark" />

<span class="spinner-border text-primary me-3"
      role="status"
      aria-hidden="true"><span class="visually-hidden">Loading...</span></span> <span class="spinner-border text-secondary me-3"
      role="status"
      aria-hidden="true"><span class="visually-hidden">Loading...</span></span> <span class="spinner-border text-success me-3"
      role="status"
      aria-hidden="true"><span class="visually-hidden">Loading...</span></span> <span class="spinner-border text-danger me-3"
      role="status"
      aria-hidden="true"><span class="visually-hidden">Loading...</span></span> <span class="spinner-border text-warning me-3"
      role="status"
      aria-hidden="true"><span class="visually-hidden">Loading...</span></span> <span class="spinner-border text-info me-3"
      role="status"
      aria-hidden="true"><span class="visually-hidden">Loading...</span></span> <span class="spinner-border text-light me-3"
      role="status"
      aria-hidden="true"><span class="visually-hidden">Loading...</span></span> <span class="spinner-border text-dark me-3"
      role="status"
      aria-hidden="true"><span class="visually-hidden">Loading...</span></span>

Different sizes

Add prop small or pass custom width and height via style attribute to make a smaller spinner that can quickly be used within other components.

<x-spinner small />
<x-spinner type="grow" small />
<x-spinner style="width: 3rem; height: 3rem;" />

<span class="spinner-border spinner-border-sm"
      role="status"
      aria-hidden="true"><span class="visually-hidden">Loading...</span></span> <span class="spinner-grow spinner-grow-sm ms-3"
      role="status"
      aria-hidden="true"><span class="visually-hidden">Loading...</span></span> <span class="spinner-border ms-3"
      style="width: 3rem; height: 3rem;"
      role="status"
      aria-hidden="true"><span class="visually-hidden">Loading...</span></span>