BOOTSTRAP BASIC
BOOTSTRAP ADVANCED
BOOTSTRAP EXAMPLES
BOOTSTRAP ARCHIVE
Advertisements

Bootstrap Spinners

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

Creating the Spinners with Bootstrap

Bootstrap 4 introduces the new spinner component that you can use to show the loading state in your projects. 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.

To create a spinner or loading indicator, you can use the .spinner-border class:

<div class="spinner-border">
    <span class="sr-only">Loading...</span>
</div>

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

The special .sr-only 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="sr-only">Loading...</span>
</div>
<div class="spinner-border text-secondary">
    <span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-success">
    <span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-danger">
    <span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-warning">
    <span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-info">
    <span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-dark">
    <span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-light">
    <span class="sr-only">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="sr-only">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 text color utility classes, as shown in the following example:

<div class="spinner-grow text-primary">
    <span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-secondary">
    <span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-success">
    <span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-danger">
    <span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-warning">
    <span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-info">
    <span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-light">
    <span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-dark">
    <span class="sr-only">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="sr-only">Loading...</span>
</div>
<div class="spinner-grow spinner-grow-sm">
    <span class="sr-only">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="sr-only">Loading...</span>
</div>
<div class="spinner-grow" style="width: 40px; height: 40px;">
    <span class="sr-only">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="sr-only">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="sr-only">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 left, right or center using the flexbox, float, or text alignment utility classes. Try out the following example to see how it actually works:

<!-- Center alignment using flex utilities -->
<div class="d-flex justify-content-center">
    <div class="spinner-border" role="status">
        <span class="sr-only">Loading...</span>
    </div>
</div>
<!-- Center alignment using text alignment utilities -->
<div class="text-center">
    <div class="spinner-border" role="status">
        <span class="sr-only">Loading...</span>
    </div>
</div>
<!-- Right alignment using float utilities -->
<div class="clearfix">
    <div class="spinner-border float-right" role="status">
        <span class="sr-only">Loading...</span>
    </div>
</div>
Advertisements

Your Feedback:

We would love to hear from you, please drop us a line.