Spinners

Indicate the loading state of a component or page with Bootstrap spinners, built entirely with HTML, CSS, and no JavaScript.

https://getbootstrap.com/docs/5.1/components/spinners/

Spinners Defaults

Preview
HTML

                  
                    <!-- 

                      Border spinners

                      Colors
                      .text-primary
                      .text-secondary
                      .text-success
                      .text-danger
                      .text-warning
                      .text-info
                      .text-light
                      .text-dark

                     -->
                    <div class="spinner-border text-primary" role="status">
                      <span class="visually-hidden">Loading...</span>
                    </div>

                    <!-- button icon : spinner border -->
                    <button class="btn btn-primary" type="button" disabled>
                      <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
                      <span class="visually-hidden">Loading...</span>
                    </button>

                    <!-- button icon+text : spinner border -->
                    <button class="btn btn-primary" type="button" disabled>
                      <i class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></i>
                      Loading...
                    </button>

                  
                    <!-- 

                      Grow spinners

                      Colors
                      .text-primary
                      .text-secondary
                      .text-success
                      .text-danger
                      .text-warning
                      .text-info
                      .text-light
                      .text-dark

                     -->
                    <div class="spinner-grow text-primary" role="status">
                      <span class="visually-hidden">Loading...</span>
                    </div>

                    <!-- button icon : spinner border -->
                    <button class="btn btn-primary" type="button" disabled>
                      <span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
                      <span class="visually-hidden">Loading...</span>
                    </button>

                    <!-- button icon + text : spinner border -->
                    <button class="btn btn-primary" type="button" disabled>
                      <i class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></i>
                      Loading...
                    </button>

Spinners Smarty

Preview
HTML

                  
                    <!-- 

                      spinning icons 
                      You can use more icons (stars, etc) to spin.
                      Just add .fi-spin class to any icon.

                      Size can be changed by using bootstrap classes (fs-1|2|3|4|5|6)

                      Colors
                      .text-primary
                      .text-danger
                      .text-warning
                      .text-info
                      .text-dark
                      .text-pink
                      .text-indigo

                    -->
                    <i class="fs-1 fi fi-spin fi-circle-spin text-primary"></i>
                    <i class="fs-1 fi fi-spin fi-orbit text-primary"></i>
                    <i class="fs-1 fi fi-spin fi-loading-dots text-primary"></i>
                    <i class="fs-1 fi fi-spin fi-loading text-primary"></i>

                    <!-- 
                      using with buttons 
                      exactly the same as bootstrap, just using fi* icons
                    -->

                    <!-- icon only -->
                    <button class="btn btn-warning" type="button" disabled>
                      <span class="fi fi-spin fi-circle-spin" role="status" aria-hidden="true"></span>
                      <span class="visually-hidden">Loading...</span>
                    </button>

                    <!-- icon+text  -->
                    <button class="btn btn-warning" type="button" disabled>
                      <i class="fi fi-spin fi-circle-spin" role="status" aria-hidden="true"></i>
                      Loading...
                    </button>