Spinners Example - Loading Spinners in Bootstrap 5.3

Bootstrap 5.3 Spinners

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap 5.3 Spinners Example</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.css">
</head>
<body>
  <div class="container">
    <h2>Bootstrap 5.3 Spinners Example</h2>

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

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

    <!-- Secondary Color Spinner -->
    <div class="spinner-border text-secondary" role="status">
      <span class="visually-hidden">Loading...</span>
    </div>

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

  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Code Output

Bootstrap 5.3 Spinners Example

Spinners

Spinners in Bootstrap 5.3 are a visual indication that something is loading or processing. They are commonly used to provide feedback to the user while waiting for content to load or an action to complete.

To create a Spinner, you can use the spinner-border class. By default, the spinner will have a gray color.