Loader Component

overview #

The Loader component provides various styles of loaders for indicating loading states. This component includes several types of loaders, such as spinner borders, growing loaders, bars, and more. Each loader can be customized with different sizes and colors.

Types of Loaders #

• Spinner Border

The loader-spinner-border class creates a spinning border loader.

Basic Usage

                        

                            

                        
                        

                            
                            
HTML
                            
                        
                        <div class="loader-spinner-border"></div>
                    

Variants

Size	Class
Small size	loader-grow-sm
Medium size	loader-grow-md
Large size	loader-grow-lg
Extra large size	loader-grow-xl
Red background color	loader-grow-danger
Yellow background color	loader-grow-warning
Green background color	loader-grow-success
Blue background color	loader-grow-information

• Grow Loader

The loader-grow class creates a growing loader.

Basic Usage

                        

                            

                        
                        

                            
                            
HTML
                            
                        
                        <div class="loader-grow"></div>
                       

Variants

Size	Class
Small size	loader-grow-sm
Medium size	loader-grow-md
Large size	loader-grow-lg
Extra large size	loader-grow-xl
Red background color	loader-grow-danger
Yellow background color	loader-grow-warning
Green background color	loader-grow-success
Blue background color	loader-grow-information

• Bars Loader

The loader-bars class creates a bars loader.

Basic Usage

                        

                            

                        
                        

                            
                            
HTML
                            
                        
                        <div class="loader-grow"></div>
                       

Variants

Size	Class
Small size	loader-bars-sm
Medium size	loader-bars-md
Large size	loader-bars-lg
Extra large size	loader-bars-xl
Red background color	loader-bars-danger
Yellow background color	loader-bars-warning
Green background color	loader-bars-success
Blue background color	loader-bars-information

• Multi Loader

The loader-multi class creates a multi-loader.

Basic Usage

                        

                            

                        
                        

                            
                            
HTML
                            
                        
                        <div class="loader-multi"></div>
                       

Variants

Size	Class
Small size	loader-multi-sm
Medium size	loader-multi-md
Large size	loader-multi-lg
Extra large size	loader-multi-xl
Red background color	loader-multi-danger
Yellow background color	loader-multi-warning
Green background color	loader-multi-success
Blue background color	loader-multi-information

• Liquid Loader

The loader-liquid class creates a liquid-style loader.

Basic Usage

                        

                            

                        
                        

                            
                            
HTML
                            
                        
                        <div class="loader-liquid"></div>
                       

Variants

Size	Class
Small size	loader-liquid-sm
Medium size	loader-liquid-md
Large size	loader-liquid-lg
Extra large size	loader-liquid-xl
Red background color	loader-liquid-danger
Yellow background color	loader-liquid-warning
Green background color	loader-liquid-success
Blue background color	loader-liquid-information

• Spinner Fade Loader

The loader-spinner-fade class creates a fading spinner loader.

Basic Usage

                        

                            

                        
                        

                            
                            
HTML
                            
                        
                        <div class="loader-spinner-fade"></div>
                       

Variants

Size	Class
Small size	loader-fade-sm
Medium size	loader-fade-md
Large size	loader-fade-lg
Extra large size	loader-fade-xl
Red background color	loader-fade-danger
Yellow background color	loader-fade-warning
Green background color	loader-fade-success
Blue background color	loader-fade-information

• Loader Spinner

The loader-spinner class creates a spinner loader.

Basic Usage

                        

                            

                        
                        

                            
                            
HTML
                            
                        
                        <div class="loader-spinner"></div>
                       

Variants

Size	Class
Small size	loader-spinner-sm
Medium size	loader-spinner-md
Large size	loader-spinner-lg
Extra large size	loader-spinner-xl
Red background color	loader-spinner-danger
Yellow background color	loader-spinner-warning
Green background color	loader-spinner-success
Blue background color	loader-spinner-information

CSS Variables and Animations #

Each loader type comes with its own set of CSS animations and can be customized using predefined color variables and size classes.