Bootstrap Spinners

A Spinner is a visual loading indicator. It tells the user that the application is currently performing an operation.

For example, a spinner can be displayed when:

• Data is loading.
• A form is being submitted.
• A file is uploading.
• An API request is processing.
• A page is waiting for a response.

The basic Bootstrap Spinner is created using the .spinner-border class.

<div class="spinner-border">
</div>

The spinner rotates continuously to indicate that an operation is in progress.

The .spinner-border class creates a circular border-style loading spinner.

<div class="spinner-border">
</div>

This is one of the simplest ways to add a loading indicator using Bootstrap.

Bootstrap contextual text color classes can be used to change the spinner color.

<div class="spinner-border text-primary">
</div>

<div class="spinner-border text-success">
</div>

<div class="spinner-border text-danger">
</div>

Use text-primary with spinner-border to create a primary-colored spinner.

<div
class="spinner-border text-primary"
role="status">

</div>

The text-success class creates a success-colored spinner.

<div
class="spinner-border text-success"
role="status">

</div>

The text-danger class creates a danger-colored spinner.

<div
class="spinner-border text-danger"
role="status">

</div>

The text-warning class can be used to create a warning colored spinner.

<div
class="spinner-border text-warning"
role="status">

</div>

Use text-info to create an information-colored spinner.

<div
class="spinner-border text-info"
role="status">

</div>

The text-secondary class can be used for a secondary spinner.

<div
class="spinner-border text-secondary"
role="status">

</div>

Bootstrap also provides a growing spinner using the .spinner-grow class.

<div class="spinner-grow">
</div>

Instead of rotating a border, the growing spinner expands and contracts visually.

Growing Spinners can also use Bootstrap text color classes.

<div
class="spinner-grow text-primary"
role="status">

</div>

Use .spinner-border-sm to create a smaller border spinner.

<div
class="spinner-border spinner-border-sm"
role="status">

</div>

Use .spinner-grow-sm to create a smaller growing spinner.

<div
class="spinner-grow spinner-grow-sm"
role="status">

</div>

A Spinner can be placed inside a button to indicate that an action is currently processing.

<button
class="btn btn-primary"
type="button"
disabled>

    <span
    class="spinner-border
    spinner-border-sm"
    role="status"
    aria-hidden="true">

    </span>

    Loading...

</button>

A growing spinner can also be placed inside a button.

<button
class="btn btn-success"
type="button"
disabled>

    <span
    class="spinner-grow
    spinner-grow-sm"
    role="status"
    aria-hidden="true">

    </span>

    Processing...

</button>

A spinner can be combined with meaningful text such as Loading..., Saving..., or Processing....

<button
class="btn btn-primary"
disabled>

    <span
    class="spinner-border
    spinner-border-sm">

    </span>

    Saving...

</button>

The text helps users understand what operation is taking place.

Bootstrap utility classes can be used to position a spinner in the center of a container.

<div
class="d-flex
justify-content-center">

    <div
    class="spinner-border"
    role="status">

    </div>

</div>

Spacing utilities such as m-*, mt-*, mb-*, and ms-* can be used to add spacing around spinners.

<div
class="spinner-border
text-primary m-3">

</div>

A spinner can be combined with a message to create a complete loading area.

<div
class="text-center">

    <div
    class="spinner-border
    text-primary">

    </div>

    <p class="mt-2">
    Loading data...
    </p>

</div>

Spinners are commonly displayed while a website waits for data from an API or server.

<div class="text-center">

    <div
    class="spinner-border text-info"
    role="status">

        <span
        class="visually-hidden">

        Loading...

        </span>

    </div>

    <p>
    Fetching data...
    </p>

</div>

A Spinner can indicate that a form is being submitted.

<button
class="btn btn-primary"
type="submit"
disabled>

    <span
    class="spinner-border
    spinner-border-sm"
    aria-hidden="true">

    </span>

    Submitting...

</button>

In a real application, JavaScript can show the spinner when the form starts submitting and hide it after the server responds.

A Spinner can be displayed while a file is being uploaded to a server.

<button
class="btn btn-success"
disabled>

    <span
    class="spinner-border
    spinner-border-sm"
    aria-hidden="true">

    </span>

    Uploading...

</button>

Loading indicators should be accessible to users who cannot see the animation.

For a standalone spinner, Bootstrap examples commonly use role="status" together with visually hidden text.

<div
class="spinner-border"
role="status">

    <span
    class="visually-hidden">

    Loading...

    </span>

</div>

Bootstrap provides small spinner variants using .spinner-border-sm and .spinner-grow-sm.

<div
class="spinner-border spinner-border-sm">

</div>

<div
class="spinner-border">

</div>

<div
class="spinner-grow spinner-grow-sm">

</div>

<div
class="spinner-grow">

</div>

Spinners can be placed inside cards when card content is still loading.

<div class="card">

    <div class="card-body text-center">

        <div
        class="spinner-border text-primary">

        </div>

        <p class="mt-2">
        Loading student data...
        </p>

    </div>

</div>

Avoid these common mistakes when using Bootstrap Spinners:

• Using a spinner without explaining what is loading.
• Forgetting accessibility information.
• Using a spinner when the operation is nearly instant.
• Showing a spinner indefinitely because the request failed.
• Using too many animated spinners on one page.
• Using animation as the only way to communicate status.
• Forgetting to remove the spinner after an operation completes.
• Using inappropriate spinner sizes for the interface.

JavaScript can show and hide a spinner dynamically when an operation starts or finishes.

<div id="loader"
class="spinner-border text-primary">

</div>

<script>

function hideLoader(){

    document
    .getElementById("loader")
    .style.display = "none";

}

</script>

For example, an application can display the spinner before making an AJAX or Fetch request and hide it after receiving the response.

The following example creates a simple loading section that can be used in a dashboard or learning website.

<div
class="text-center p-4">

    <div
    class="spinner-border text-primary"
    role="status">

        <span
        class="visually-hidden">

        Loading...

        </span>

    </div>

    <h5 class="mt-3">
    Please Wait
    </h5>

    <p class="text-body-secondary">
    Loading your dashboard...
    </p>

</div>

This example combines a spinner, loading message, button, contextual color, and Bootstrap utilities.

<div
class="card">

    <div
    class="card-body text-center">

        <div
        class="spinner-border text-primary"
        role="status">

            <span
            class="visually-hidden">

            Loading...

            </span>

        </div>

        <h4 class="mt-3">
        Loading Student Dashboard
        </h4>

        <p class="text-body-secondary">
        Please wait while your data is being loaded.
        </p>

        <button
        class="btn btn-primary"
        disabled>

            <span
            class="spinner-border
            spinner-border-sm"
            aria-hidden="true">

            </span>

            Loading...

        </button>

    </div>

</div>