BOOTSTRAP BASIC
BOOTSTRAP ADVANCED
BOOTSTRAP EXAMPLES
BOOTSTRAP ARCHIVE

Bootstrap Spinners

In this tutorial you will learn how to use the Bootstrap spinner component.

Creating the Spinners with Bootstrap

Bootstrap introduces the new spinner component that you can use to show the loading state in your applications. Spinners are typically loading icons and they're built only with HTML and CSS. However, you need some custom JavaScript to show or hide them on a web page.

Moreover, you can easily customize the appearance, alignment, and sizing of the spinners with the pre-defined utility classes. Now, let's see how to create them.

Creating Border Spinner

You can create a border spinner or a lightweight loading indicator, like this:

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

— The output of the above example will look something like this:

The special .visually-hidden class hides an element to all devices except screen readers.


Creating Colored Spinner

You can use the text color utility classes to customize the color of spinners.

<div class="spinner-border text-primary">
    <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-secondary">
    <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-success">
    <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-danger">
    <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-warning">
    <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-info">
    <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-dark">
    <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-light">
    <span class="visually-hidden">Loading...</span>
</div>

— The output of the above example will look something like this:


Creating Growing Spinners

You can also create growing spinners that repeatedly grow and fade out, like this:

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

— The output of the above example will look something like this:

Similarly, like the border spinners you can also customize the colors of growing spinners using the Bootstrap's text color utility classes, as shown in the following example:

<div class="spinner-grow text-primary">
    <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-secondary">
    <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-success">
    <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-danger">
    <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-warning">
    <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-info">
    <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-light">
    <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-dark">
    <span class="visually-hidden">Loading...</span>
</div>

— The output of the above example will look something like this:


Sizing of Spinners

You can use the class .spinner-border-sm and .spinner-grow-sm to make a smaller spinner that can quickly be used within other components such as buttons.

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

— The output of the above example will look something like this:

Alternatively, you can use the custom CSS or inline styles to change the size as needed.

<div class="spinner-border" style="width: 40px; height: 40px;">
    <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow" style="width: 40px; height: 40px;">
    <span class="visually-hidden">Loading...</span>
</div>

— The output of the above example will look something like this:


Using Spinners within Buttons

You can also use spinners within buttons to indicate an action is currently processing or taking place.

Here's an example where we've placed the spinners inside the disabled buttons.

<!-- Border spinners inside buttons -->
<button class="btn btn-primary" type="button" disabled>
    <span class="spinner-border spinner-border-sm"></span>
    <span class="visually-hidden">Loading...</span>
</button>
<button class="btn btn-primary" type="button" disabled>
    <span class="spinner-border spinner-border-sm"></span>
    Loading...
</button>	

<!-- Growing spinners inside buttons -->
<button class="btn btn-primary" type="button" disabled>
    <span class="spinner-grow spinner-grow-sm"></span>
    <span class="visually-hidden">Loading...</span>
</button>
<button class="btn btn-primary" type="button" disabled>
    <span class="spinner-grow spinner-grow-sm"></span>
    Loading...
</button>

— The output of the above example will look something like this:


Alignment of Spinners

You can easily align the spinners to left, right or center using the flexbox, text alignment, or float utility classes. Let's try out the following example and see how it actually works:

<!-- Center align spinner using flex utilities -->
<div class="d-flex justify-content-center">
    <div class="spinner-border" role="status">
        <span class="visually-hidden">Loading...</span>
    </div>
</div>

<!-- Center align spinner using text alignment utilities -->
<div class="text-center">
    <div class="spinner-border" role="status">
        <span class="visually-hidden">Loading...</span>
    </div>
</div>
Bootstrap UI Design Templates Property Marvels - A Leading Real Estate Portal for Premium Properties