Logo
Hi, Sean S

Spinners 

<div class="text-center">
  <b-spinner label="Spinning"></b-spinner>
  <b-spinner type="grow" label="Spinning"></b-spinner>
  <b-spinner variant="primary" label="Spinning"></b-spinner>
  <b-spinner variant="primary" type="grow" label="Spinning"></b-spinner>
  <b-spinner variant="success" label="Spinning"></b-spinner>
  <b-spinner variant="success" type="grow" label="Spinning"></b-spinner>
</div>

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

Flex 

<div>
  <div class="d-flex justify-content-center mb-3">
    <b-spinner label="Loading..."></b-spinner>
  </div>

  <div class="d-flex align-items-center">
    <strong>Loading...</strong>
    <b-spinner class="ml-auto"></b-spinner>
  </div>
</div>

Using flex utility classes

Loading...

Text align 

<div class="text-center">
  <b-spinner variant="primary" label="Text Centered"></b-spinner>
</div>

Using text alignment utility classes

Spinners in buttons 

<div>
  <b-button variant="primary" disabled>
    <b-spinner small></b-spinner>
    <span class="sr-only">Loading...</span>
  </b-button>

  <b-button variant="primary" disabled>
    <b-spinner small type="grow"></b-spinner>
    Loading...
  </b-button>
</div>

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

Spinner color variants 

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

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

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.