Spinners in Bootstrap 4 are used to indicate loading states in applications. They are lightweight, animated, and customizable elements that help improve user experience by showing that an operation is in progress.
What This Tutorial Covers:
- Basic Bootstrap 4 spinners
- Border and grow spinners
- Different spinner colors
- Sizing spinners
- Spinners inside buttons
- Alignment and positioning
- Customizing spinners with CSS
1. Basic Bootstrap 4 Spinners
Bootstrap 4 provides two types of spinners:
- Border Spinner – Uses a border to create a rotating effect.
- Growing Spinner – Expands and contracts to indicate loading.
Example: Border Spinner
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap 4 Spinners</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
<div class="container mt-4">
<div class="spinner-border text-primary" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
</body>
</html>
Explanation:
- .spinner-border creates the rotating spinner.
- role=”status” improves accessibility.
- <span class=”sr-only”>Loading…</span> provides a screen reader message for visually impaired users.
2. Growing Spinner
The growing spinner does not rotate but instead pulsates, creating a growing effect.
Example:
<div class="container mt-4">
<div class="spinner-grow text-success" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
Explanation:
- .spinner-grow creates the growing spinner effect.
- The color is controlled using Bootstrap text utilities (e.g., text-success).
3. Different Spinner Colors
Spinners support Bootstrap 4 text color classes.
Example:
<div class="container mt-4">
<div class="spinner-border text-primary"></div>
<div class="spinner-border text-secondary"></div>
<div class="spinner-border text-success"></div>
<div class="spinner-border text-danger"></div>
<div class="spinner-border text-warning"></div>
<div class="spinner-border text-info"></div>
<div class="spinner-border text-light"></div>
<div class="spinner-border text-dark"></div>
</div>
Available Colors:
| Color Class | Description |
|---|---|
| text-primary | Blue Spinner |
| text-secondary | Gray Spinner |
| text-success | Green Spinner |
| text-danger | Red Spinner |
| text-warning | Yellow Spinner |
| text-info | Light Blue Spinner |
| text-light | Light Gray Spinner |
| text-dark | Dark Gray Spinner |
4. Sizing Spinners
Bootstrap 4 spinners can be resized using .spinner-border-sm or .spinner-grow-sm.
Example: Small Spinner
<div class="container mt-4">
<div class="spinner-border spinner-border-sm text-primary"></div>
<div class="spinner-grow spinner-grow-sm text-success"></div>
</div>
Custom Size Using CSS
You can also change the spinner size using inline styles.
<div class="container mt-4">
<div class="spinner-border text-danger" style="width: 3rem; height: 3rem;"></div>
</div>
5. Spinners Inside Buttons
Spinners can be placed inside buttons to indicate loading states.
Example: Button with Spinner
<div class="container mt-4">
<button class="btn btn-primary" type="button" disabled>
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
Loading...
</button>
</div>
Explanation:
- The spinner is placed inside the button.
- disabled prevents user interaction while loading.
Example: Button with Growing Spinner
<button class="btn btn-success" type="button" disabled>
<span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
Processing...
</button>
6. Alignment and Positioning
You can align spinners using Bootstrap’s flex utilities.
Centered Spinner
<div class="d-flex justify-content-center mt-4">
<div class="spinner-border text-primary"></div>
</div>
Right-Aligned Spinner
<div class="d-flex justify-content-end mt-4">
<div class="spinner-border text-danger"></div>
</div>
Vertically and Horizontally Centered Spinner
<div class="d-flex justify-content-center align-items-center" style="height: 100vh;">
<div class="spinner-border text-warning"></div>
</div>
Explanation:
- .d-flex makes the container flexible.
- .justify-content-center horizontally centers the spinner.
- .align-items-center vertically centers the spinner.
7. Customizing Spinners with CSS
You can modify Bootstrap spinners using custom CSS.
Custom Color and Size Example:
<style>
.custom-spinner {
width: 50px;
height: 50px;
border-width: 5px;
color: #ff5733;
}
</style>
<div class="container mt-4">
<div class="spinner-border custom-spinner"></div>
</div>
Explanation:
- width and height control spinner size.
- border-width makes the spinner thicker.
- color changes the spinner color.
8. Animated Loading Text with Spinner
To make a more interactive loading state, you can animate text along with the spinner.
Example:
<div class="container mt-4">
<div class="d-flex align-items-center">
<strong>Loading...</strong>
<div class="spinner-border ml-2 text-info"></div>
</div>
</div>
Explanation:
- d-flex aligns the text and spinner inline.
- ml-2 adds a small margin to separate the text from the spinner.
9. Using Spinners with JavaScript
You can show and hide spinners dynamically using JavaScript.
Example:
<button id="loadButton" class="btn btn-primary">Show Spinner</button>
<div id="spinnerContainer" class="mt-3" style="display: none;">
<div class="spinner-border text-primary"></div>
</div>
<script>
document.getElementById("loadButton").addEventListener("click", function() {
document.getElementById("spinnerContainer").style.display = "block";
});
</script>
Explanation:
- Clicking the button reveals the spinner using JavaScript.
Conclusion
Bootstrap 4 spinners provide a way to indicate loading states.
