Prev Next

BS5 Spinners

Bootstrap 5 Spinners are used to indicate the loading state of a component or process. They are lightweight and fully customizable with utility classes.

Key Topics

Basic Spinners

Bootstrap spinners are created with the .spinner-border or .spinner-grow class.

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

Explanation: Use .spinner-border for a circular spinner and .spinner-grow for a growing spinner. The .visually-hidden class ensures accessibility.

Spinner Colors

Add contextual classes like .text-primary or .text-danger to change spinner colors.

<div class="spinner-border text-primary" role="status">
    <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-danger" role="status">
    <span class="visually-hidden">Loading...</span>
</div>

Explanation: Add color classes like .text-primary or .text-success to match the spinners with your theme.

Spinner Sizes

Use size classes like .spinner-border-sm or .spinner-grow-sm for smaller spinners.

<div class="spinner-border spinner-border-sm" role="status">
    <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow spinner-grow-sm" role="status">
    <span class="visually-hidden">Loading...</span>
</div>

Explanation: The -sm suffix creates smaller spinners suitable for compact layouts.

Complete Spinner Example

Below is a complete HTML page demonstrating Bootstrap spinners with different styles and sizes.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap 5 Spinners Demo</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container my-4">
        <h2>Bootstrap Spinners</h2>

        <h3>Basic Spinners</h3>
        <div class="spinner-border" role="status">
            <span class="visually-hidden">Loading...</span>
        </div>
        <div class="spinner-grow" role="status">
            <span class="visually-hidden">Loading...</span>
        </div>

        <h3>Colored Spinners</h3>
        <div class="spinner-border text-primary" role="status">
            <span class="visually-hidden">Loading...</span>
        </div>
        <div class="spinner-grow text-danger" role="status">
            <span class="visually-hidden">Loading...</span>
        </div>

        <h3>Small Spinners</h3>
        <div class="spinner-border spinner-border-sm" role="status">
            <span class="visually-hidden">Loading...</span>
        </div>
        <div class="spinner-grow spinner-grow-sm" role="status">
            <span class="visually-hidden">Loading...</span>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Explanation: This example combines all spinner styles and sizes in a responsive layout.

Key Takeaways

  • Use .spinner-border or .spinner-grow for spinners.
  • Apply contextual classes like .text-primary for color.
  • Adjust spinner sizes with .spinner-border-sm or .spinner-grow-sm.
Prev Next