Sure! Here’s a quick guide on Bootstrap 5 Spinners — animated loading indicators.

? Bootstrap 5 Spinners

Spinners provide visual feedback for loading or processing.

1. Border Spinner (Default)

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

• .spinner-border creates a spinning border circle.

• Use <span class="visually-hidden"> for screen reader accessibility.

2. Growing Spinner

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

• .spinner-grow creates a growing spinner animation.

3. Spinner Colors

Add contextual color classes:

• .text-primary

• .text-secondary

• .text-success

• .text-danger

• .text-warning

• .text-info

• .text-light

• .text-dark

Example:

<div class="spinner-border text-primary" role="status">  <span class="visually-hidden">Loading...</span></div>

4. Spinner Sizes

Use inline style or utility classes to size spinners:

<div class="spinner-border" style="width: 3rem; height: 3rem;" role="status">  <span class="visually-hidden">Loading...</span></div>

Or smaller:

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

5. Example with Button

You can combine spinners inside buttons for loading states:

<button class="btn btn-primary" type="button" disabled>  <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>  Loading...</button>

Summary Table

Want help adding spinners to buttons, overlays, or modals? Just ask!