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:

Example

<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.