Spinners ​

Spinners can be placed just about anywhere, including inside buttons, alerts, and even <BTable>'s busy slot.

<div class="text-center">
  <BSpinner
    label="Spinning"
    class="mx-1"
  />
  <BSpinner
    type="grow"
    label="Spinning"
    class="mx-1"
  />
  <BSpinner
    variant="primary"
    label="Spinning"
    class="mx-1"
  />
  <BSpinner
    variant="primary"
    type="grow"
    label="Spinning"
    class="mx-1"
  />
  <BSpinner
    variant="success"
    label="Spinning"
    class="mx-1"
  />
  <BSpinner
    variant="success"
    type="grow"
    label="Spinning"
    class="mx-1"
  />
</div>

Spinner types ​

Border spinner ​

Use the default border type spinners for a lightweight loading indicator.

<BSpinner />

Growing spinner ​

If you don't fancy a border spinner, switch to the grow spinner by setting the prop type to 'grow'. While it doesn't technically spin, it does repeatedly grow!

<BSpinner type="grow" />

Spinner color variants ​

Spinners use currentColor for their color, meaning it inherits the current font color. You can customize the color using the standard text color variants using the variant prop, or place classes or styles on the component to change its color.

The variant prop translates the variant name to the Bootstrap v4 class .text-{variant}, so if you have custom defined text color variants, feel free to use them via the variant prop.

<template>
  <div>
    <div class="text-center mb-3 d-flex justify-content-between">
      <BSpinner
        v-for="variant in variants"
        :key="variant"
        :variant="variant"
      />
    </div>

    <div class="text-center d-flex justify-content-between">
      <BSpinner
        v-for="variant in variants"
        :key="variant"
        :variant="variant"
        type="grow"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import type {ColorVariant} from 'bootstrap-vue-next'

const variants = [
  'primary',
  'secondary',
  'danger',
  'warning',
  'success',
  'info',
  'light',
  'dark',
] as ColorVariant[]
</script>

Size ​

Set the prop small to true to make a smaller spinner that can quickly be used within other components.

<BSpinner
  small
  class="me-2"
/>
<BSpinner
  small
  type="grow"
/>

Or, use custom CSS or inline styles to change the dimensions as needed.

<BSpinner
  style="width: 3rem; height: 3rem"
  class="me-2"
  label="Large Spinner"
/>
<BSpinner
  style="width: 3rem; height: 3rem"
  label="Large Spinner"
  type="grow"
/>

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 ​

Use margin utilities like .m-5 for easy spacing.

<BSpinner
  class="m-5"
  label="Busy"
/>

Placement ​

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

Flex ​

Using flex utility classes:

<div class="d-flex justify-content-center">
  <BSpinner />
</div>

Floats ​

Using float utility classes:

<div class="clearfix">
  <BSpinner class="float-end" />
</div>

Text align ​

Using text alignment utility classes:

<div class="text-center">
  <BSpinner />
</div>

Spinners in buttons ​

Use spinners within buttons to indicate an action is currently processing or taking place. You may also swap the text out of the spinner element and utilize button text as needed.

<BButton
  variant="primary"
  disabled
  class="me-2"
>
  <BSpinner small />
  <span class="visually-hidden">Loading...</span>
</BButton>
<BButton
  variant="primary"
  disabled
>
  <BSpinner small />
  Loading...
</BButton>

<BButton
  variant="primary"
  disabled
  class="me-2"
>
  <BSpinner
    small
    type="grow"
  />
  <span class="visually-hidden">Loading...</span>
</BButton>
<BButton
  variant="primary"
  disabled
>
  <BSpinner
    small
    type="grow"
  />
  Loading...
</BButton>

Spinner accessibility ​

Place a hidden label text inside the spinner for screen reader users, via the label prop or label slot. The content will be placed inside the spinner wrapped in a <span> element that has the class visually-hidden, which will make the label available to screen reader users.

For accessibility purposes, each spinner will automatically have a role="status" attribute when a label is provided. You can easily customize the role if required via prop role. The specified role will not be applied when no label is provided.

As well, when no label is provided, the spinner will automatically have the attribute aria-hidden="true" to hide the spinner from screen reader users.