0
0
Bootsrapmarkup~5 mins

Spinner components in Bootsrap

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Introduction

Spinners show that something is loading or working in the background. They help users know to wait.

When a page or data is loading slowly.
While waiting for a form to submit.
During file uploads or downloads.
When fetching information from the internet.
To show progress in background tasks.
Syntax
Bootsrap
<div class="spinner-border" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

Use spinner-border for a rotating border spinner.

Always include role="status" and a span with visually-hidden text for accessibility.

Examples
Basic spinner with default size and color.
Bootsrap
<div class="spinner-border" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
Spinner with blue color using Bootstrap's text-primary class.
Bootsrap
<div class="spinner-border text-primary" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
Small spinner using spinner-border-sm class.
Bootsrap
<div class="spinner-border spinner-border-sm" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
Growing spinner style with green color using spinner-grow and text-success.
Bootsrap
<div class="spinner-grow text-success" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
Sample Program

This page shows three spinners centered vertically and horizontally. Each spinner uses different styles and colors to demonstrate Bootstrap spinner components. The visually-hidden text helps screen readers understand the spinner means loading.

Bootsrap
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Bootstrap Spinner Example</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
  <main class="d-flex flex-column align-items-center justify-content-center vh-100 gap-3">
    <h1>Loading Data</h1>
    <div class="spinner-border text-primary" role="status" aria-label="Loading">
      <span class="visually-hidden">Loading...</span>
    </div>
    <div class="spinner-grow text-success" role="status" aria-label="Loading">
      <span class="visually-hidden">Loading...</span>
    </div>
    <div class="spinner-border spinner-border-sm text-danger" role="status" aria-label="Loading">
      <span class="visually-hidden">Loading...</span>
    </div>
  </main>
</body>
</html>
OutputSuccess
Important Notes

Spinners do not show progress amount, only that something is happening.

Use aria-label or role="status" with hidden text for screen reader support.

Customize spinner size with spinner-border-sm or CSS if needed.

Summary

Spinners visually show loading or processing states.

Bootstrap offers spinner-border and spinner-grow styles.

Always add accessible text inside spinners for screen readers.