A spinner is a loading indicator that visually communicates to users that a process is ongoing, such as data loading or processing. Spinners are often used to improve user experience by providing feedback while they wait, indicating that the system is working and preventing them from becoming frustrated with delays.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap spinners Example</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!-- Basic Spinner Grow -->
<div class="spinner-container">
<h5>Basic Spinner Grow</h5>
<div class="spinner-grow text-success" role="status" style="width: 3rem; height: 3rem;">
<span class="sr-only">Loading...</span>
</div>
</div>
<!-- Colorful Spinners -->
<div class="spinner-container">
<h5>Colorful Spinners</h5>
<div class="d-flex justify-content-around">
<div class="spinner-border text-danger" role="status" style="width: 2rem; height: 2rem;">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-warning" role="status" style="width: 2rem; height: 2rem;">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-info" role="status" style="width: 2rem; height: 2rem;">
<span class="sr-only">Loading...</span>
</div>
</div>
</div>
<!-- Spinner with Text -->
<div class="spinner-container">
<h5>Spinner with Text</h5>
<div class="d-flex align-items-center justify-content-center">
<div class="spinner-border text-primary me-2" role="status" style="width: 2rem; height: 2rem;">
<span class="sr-only">Loading...</span>
</div>
<span>Loading data, please wait...</span>
</div>
</div>
<!-- Spinners in a Card -->
<div class="spinner-container">
<h5>Spinners in a Card</h5>
<div class="card text-center">
<div class="card-body">
<h6>Processing...</h6>
<div class="spinner-border text-secondary" role="status" style="width: 3rem; height: 3rem;">
<span class="sr-only">Loading...</span>
</div>
</div>
</div>
</div>
<!-- Overlay Spinner -->
<div class="spinner-container">
<h5>Overlay Spinner</h5>
<div class="overlay">
<h6 class="text-center">Content here</h6>
<div class="spinner-border text-warning" role="status" style="width: 3rem; height: 3rem;">
<span class="sr-only">Loading...</span>
</div>
</div>
</div>
<!-- Spinner with Different Sizes -->
<div class="spinner-container">
<h5>Spinner with Different Sizes</h5>
<div class="d-flex justify-content-around">
<div class="spinner-border text-primary" role="status" style="width: 1rem; height: 1rem;">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-success" role="status" style="width: 2rem; height: 2rem;">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-danger" role="status" style="width: 3rem; height: 3rem;">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-warning" role="status" style="width: 4rem; height: 4rem;">
<span class="sr-only">Loading...</span>
</div>
</div>
</div>
<!-- Inline Spinner with Loading Text -->
<div class="spinner-container">
<h5>Inline Spinner with Loading Text</h5>
<p>
Processing your request
<div class="spinner-border text-info ms-2" role="status" style="width: 1.5rem; height: 1.5rem;">
<span class="sr-only">Loading...</span>
</div>
</p>
</div>
<!-- Spinners with Animation -->
<div class="spinner-container">
<h5>Spinners with Animation</h5>
<div class="d-flex justify-content-around">
<div class="spinner-border text-primary" role="status" style="width: 3rem; height: 3rem;">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-success" role="status" style="width: 3rem; height: 3rem;">
<span class="sr-only">Loading...</span>
</div>
</div>
<p class="mt-2">Both spinners animate simultaneously.</p>
</div>
<!-- Example Section with Spinners -->
<div class="example-section">
<h5>Example Section with Spinners</h5>
<p>Use the following spinners to indicate loading states in various contexts:</p>
<div class="d-flex justify-content-between">
<div class="text-center">
<h6>Loading Data</h6>
<div class="spinner-border text-primary" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
<div class="text-center">
<h6>Saving Data</h6>
<div class="spinner-grow text-success" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
<div class="text-center">
<h6>Retrieving Data</h6>
<div class="spinner-border text-warning" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>