Loaders

Sizes

A simple yet versatile animated spinner component. Add .loader-[sm|lg]or .is-loading-[sm|lg]to create loaders at different sizes.

<div class="loader loader-lg"></div>

                                        <div class="loader"></div>

                                        <div class="loader loader-sm"></div>

Colors

Using Bootstrap’s typical naming structure i.e. .loader-primary,you can create colored loaders depending on your needs.

<div class="loader loader-primary"></div>

Loader Helper

Indicate loading state of nearly any component with an .is-loadingmodifier.

Loading card

Loading content

Button Button

<!-- Buttons -->

                                        <a href="#" class="btn btn-lg btn-primary is-loading">Button</a>

                                        <a href="#" class="btn btn-outline-primary is-loading is-loading-sm">Button</a>

                                        

                                        <!-- Loading card -->

                                        <div class="card">

                                          <div class="card-header">

                                            <h4 class="card-title">Loading card</h4>

                                          </div>

                                          <div class="card-body is-loading is-loading-lg">

                                            Loading content

                                          </div>

                                        </div>