Bootstrap 5 Spinners

How it works

A spinner indicates activity without claiming a numeric fraction. Pair it with meaningful text and choose whether a status region should announce the change. A decorative spinner inside an already named button can be hidden from assistive technology to avoid duplicate announcements. The example is a frozen waiting-state fixture, not a permanently running network job. A real operation must eventually expose success, failure, cancellation or timeout, rather than leaving a user unable to continue.

Run and inspect

Save the complete document as index.html in a separate lab folder. Place Bootstrap 5.3.8 CSS beside it. Open the file in a normal browser. A separate local static server is optional; no database or PHP execution is required. Keep the Bootstrap licence with redistributed assets.

Download this complete HTML source.

Try in playground

The preview injects local Bootstrap CSS when you select Run code. It blocks external resources and actual form submission; nothing runs on import. Bootstrap plugin scripts are not loaded there.

Example

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap 5 Give a Waiting State a Text Alternative</title>
  <link rel="stylesheet" href="bootstrap.min.css">
</head>
<body>
<main class="container py-4">
  <h1 class="h3 mb-4">Repair day</h1>
<button class="btn btn-primary" type="button" disabled><span class="spinner-border spinner-border-sm me-2" aria-hidden="true"></span>Checking places</button><p class="mt-3 mb-0">This sample shows the pending state only; no availability request is sent.</p>
</main>
</body>
</html>

Expected result

The disabled button shows a small spinner and an explicit pending label without pretending a request was made.

The button label names the state while the spinner is decorative. Bootstrap slows animations under reduced-motion preferences, but test the actual component and avoid making motion the only indication of work. A real async button should restore an appropriate actionable state after every outcome and prevent accidental duplicate submissions under its contract.