Nearby lessons
15 of 39🔄 BS5 Spinners
📌 What Are Bootstrap 5 Spinners?
Spinners are loading indicators. Use .spinner-border (rotating circle) or .spinner-grow (pulsing circle). Add role="status" and optional aria-hidden="true" for accessibility.
🔄 Border Spinner (.spinner-border)
.spinner-border – a circle that rotates. Use with utility classes like .text-primary, .text-success, etc. for color.
📈 Growing Spinner (.spinner-grow)
.spinner-grow – a circle that grows and shrinks (pulse effect). Use with .text-* for color.
📏 Spinner Sizes (.spinner-border-sm, .spinner-border-lg)
.spinner-border-sm / .spinner-grow-sm – smaller spinner. .spinner-border-lg / .spinner-grow-lg – larger spinner (if your Bootstrap build includes it; otherwise use custom CSS).
🎨 Spinner Colors (.text-*)
Use Bootstrap text color utilities on the spinner: .text-primary, .text-secondary, .text-success, .text-danger, .text-warning, .text-info, .text-dark. For light/warning/info you may need .text-dark for visibility.
🔘 Spinner Inside Button
Put a .spinner-border or .spinner-grow with .spinner-border-sm / .spinner-grow-sm inside a button and add disabled while loading.
✅ Spinner Best Practices
- Use role="status" so screen readers announce loading.
- Add visible text (e.g. "Loading...") next to or inside the button.
- Disable buttons that trigger the action while the spinner is shown.
- Prefer .spinner-border for most cases; use .spinner-grow for a different style.