Bootstrap 5 Spinners
Loading indicators for your applications
⏳ What are Spinners?
Spinners indicate loading states in your projects. They're built with HTML, CSS, and no JavaScript required. Use them to show users that content is being loaded or processed in the background.
<!-- Basic Border Spinner -->
<div class="spinner-border" role="status">
<span class="visually-hidden">Loading...</span>
</div>
Output:
Border Spinners
The default border spinner uses CSS border animation to create a circular loading indicator that works across all browsers. It’s lightweight, performant, and ideal for general loading states, form submissions, or any situation requiring minimal space. Border spinners provide clear visual feedback during processing, reducing user uncertainty and improving interface responsiveness by indicating that an action is being handled in the background.
<div class="spinner-border text-primary" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-success" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-danger" role="status">
<span class="visually-hidden">Loading...</span>
</div>Output:
🔹 Growing Spinners
Use the spinner-grow class for a pulsing animation effect instead of rotation, creating a gentle fade-in-and-out breathing motion. Growing spinners offer a subtler, less distracting alternative to rotating indicators, suitable for situations where a calming visual cue is preferred. This style is effective for background processes, gentle notifications, or interfaces where minimal visual disruption is a key design consideration.
<div class="spinner-grow text-primary" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-success" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-danger" role="status">
<span class="visually-hidden">Loading...</span>
</div>Output:
🔹 Spinner Sizes
Adjust spinner size with spinner-border-sm or spinner-grow-sm classes, or use custom CSS for precise dimensions. Smaller spinners fit neatly inside buttons or compact UI elements, while larger ones suit full-page loading states or prominent operations. Flexible sizing ensures spinners integrate appropriately across different components, maintaining visual harmony and providing clear, context-appropriate feedback for various loading scenarios.
<!-- Small Border Spinner -->
<div class="spinner-border spinner-border-sm" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<!-- Small Growing Spinner -->
<div class="spinner-grow spinner-grow-sm" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<!-- Custom Size -->
<div class="spinner-border" style="width: 3rem; height: 3rem;" role="status">
<span class="visually-hidden">Loading...</span>
</div>Output:
🔹 Spinners in Buttons
Place spinners inside buttons to indicate loading actions, often combined with a disabled state to prevent multiple clicks. This pattern provides immediate visual feedback that an action is processing, improving user experience by reducing duplicate submissions and clarifying system status. Spinner-enhanced buttons are common in forms, payment processes, or any interactive element requiring backend processing, enhancing usability and trust.
<button class="btn btn-primary" type="button" disabled>
<span class="spinner-border spinner-border-sm" role="status"></span>
Loading...
</button>
<button class="btn btn-success" type="button" disabled>
<span class="spinner-grow spinner-grow-sm" role="status"></span>
Processing...
</button>Output:
🔹 Alignment and Placement
Use flexbox utilities like d-flex justify-content-center or text alignment classes to position spinners precisely. Proper alignment ensures spinners appear where users expect them, maintaining a polished interface. Center spinners in containers for emphasis, or align them inline with text for subtle indications. Consistent placement improves readability and reinforces a professional, intentional design aesthetic.
<!-- Centered Spinner -->
<div class="d-flex justify-content-center">
<div class="spinner-border" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
<!-- Text Aligned -->
<div class="text-center">
<div class="spinner-border" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>