Spinners

Examples

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

Spinners on Bootstrap

Border Spinner

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

Use border spinners as lightweight loading indicators.

Colors

                                    
                                        <div class="spinner-border text-primary m-2" role="status"></div>
                                    
                                
                                    
                                        <div class="spinner-border text-secondary m-2" role="status"></div>
                                    
                                
                                        
                                        <div class="spinner-border text-success m-2" role="status"></div>
                                    
                                
                                     
                                        <div class="spinner-border text-danger m-2" role="status"></div>
                                    
                                
                                     
                                        <div class="spinner-border text-warning m-2" role="status"></div>
                                    
                                
                                      
                                        <div class="spinner-border text-info m-2" role="status"></div>
                                    
                                
                                    
                                        <div class="spinner-border text-light m-2" role="status"></div>
                                    
                                
                                     
                                        <div class="spinner-border text-dark m-2" role="status"></div>

Use text color utilities like .text-primary, .text-success, or .text-danger to style the spinner, which inherits its color from currentColor.

Alignment

                                    
                                        <div class="d-flex justify-content-center">
                                            <div class="spinner-border" role="status"></div>
                                        </div>

Bootstrap spinners use rem, currentColor, and inline-flex for easy sizing and alignment.

Loading...

Buttons Spinner

                                                                                                                                           
                                        <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 class="btn btn-primary" type="button" disabled>
                                            <span class="spinner-border spinner-border-sm me-1" role="status" aria-hidden="true"></span>
                                            Loading...
                                        </button>                                                   
                                    
                                
                                                                                    
                                        <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 class="btn btn-primary" type="button" disabled>
                                            <span class="spinner-grow spinner-grow-sm me-1" role="status" aria-hidden="true"></span>
                                            Loading...
                                        </button>

Growing Spinner

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

Bootstrap spinners use rem, currentColor, and inline-flex for easy resizing, coloring, and alignment.

Color Growing Spinner

                                    
                                        <div class="spinner-grow text-primary m-2" role="status"></div>
                                    
                                
                                    
                                        <div class="spinner-grow text-secondary m-2" role="status"></div>
                                    
                                
                                    
                                        <div class="spinner-grow text-success m-2" role="status"></div>
                                    
                                
                                    
                                        <div class="spinner-grow text-danger m-2" role="status"></div>
                                    
                                
                                    
                                        <div class="spinner-grow text-warning m-2" role="status"></div>
                                    
                                
                                    
                                        <div class="spinner-grow text-info m-2" role="status"></div>
                                    
                                
                                    
                                        <div class="spinner-grow text-light m-2" role="status"></div>
                                    
                                
                                    
                                        <div class="spinner-grow text-dark m-2" role="status"></div>

The grow spinner also uses currentColor, so apply classes like .text-primary, .text-warning, or .text-info to customize its color.

Size

                                                                                        
                                        <div class="spinner-border avatar-lg text-primary m-2" role="status"></div>
                                    
                                
                                    
                                        <div class="spinner-grow avatar-lg text-secondary m-2" role="status"></div>                                            
                                    
                                
                                    
                                        <div class="spinner-border avatar-md text-primary m-2" role="status"></div>
                                    
                                
                                    
                                        <div class="spinner-grow avatar-md text-secondary m-2" role="status"></div>                                                
                                    
                                
                                                                                    
                                        <div class="spinner-border avatar-sm text-primary m-2" role="status"></div>
                                    
                                
                                    
                                        <div class="spinner-grow avatar-sm text-secondary m-2" role="status"></div>
                                    
                                
                                    
                                        <div class="spinner-border spinner-border-sm m-2" role="status"></div>
                                    
                                
                                    
                                        <div class="spinner-grow spinner-grow-sm m-2" role="status"></div>