Bootstrap 4 Tutorial
BS4 Introduction BS4 Getting Started BS4 Containers BS4 Typography BS4 Grid Basics BS4 Tables BS4 Images BS4 Jumbotron BS4 Buttons BS4 Button Groups BS4 Spinners BS4 Alerts BS4 Dropdowns BS4 Collapse BS4 Navs BS4 Navbars BS4 Pagination BS4 Breadcrumbs BS4 Badges BS4 Progress Bars BS4 List Groups BS4 Cards BS4 Forms BS4 Inputs BS4 Input Groups BS4 Custom Forms BS4 Carousel BS4 Modal BS4 Tooltips BS4 Popovers BS4 Toast BS4 Scrollspy BS4 Media Objects BS4 Filters BS4 Utilities Bootstrap 3 vs. Bootstrap 4
Bootstrap 4 Grid
BS4 Grid System BS4 Grid XSmall BS4 Grid Small BS4 Grid Medium BS4 Grid Large BS4 Grid XLarge
Bootstrap 4 Reference
JS Alert JS Carousel JS Collapse JS Dropdown JS Modal JS Popover JS Tab JS Toasts JS Tooltip

Bootstrap 4 Spinners

Bootstrap 4 spinners can be used to show the loading state in your projects.

Spinners are loading icons and they're built only with HTML and CSS, meaning you don’t need any JavaScript.


Border Spinner

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

Loading...
Run code

Colored Spinners

The border spinner uses currentColor for its border-color, meaning you can customize the color with text color utilities:

Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Run code

Why not use border-color utilities? Each border spinner specifies a transparent border for at least one side, so .border-{color} utilities would override that.



Growing Spinners

If you don’t fancy a border spinner, switch to the grow spinner. While it doesn’t technically spin, it does repeatedly grow!

Use the .spinner-grow class to grow a spinner instead of spin:

Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Run code

Aligning Spinners

Spinners are built with currentColor, and display: inline-flex. This means they can easily be resized, recolored, and quickly aligned.

Use float utilities, or text alignment utilities to place spinners exactly where you need them in any situation:

Run code

Spinner Size

Use .spinner-border-sm or .spinner-grow-sm to create a smaller spinner:

Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Run code

Or, use custom CSS or inline styles to change the dimensions as needed:

Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Run code

Spinner Buttons

With Bootstrap 4 we can easily include spinner icon in a button:

Run code