Bootstrap - Spinners

---

---

This chapter will discuss about Bootstrap spinners. Bootstrap spinner display the loading state of projects using .spinner class.

How it works

• Bootstrap spinners show the loading state of a project, using HTML and CSS. JavaScript is not required to build them.

• Custom JavaScript is needed to toggle their visibility. Appearance, alignment, and sizing can be easily customized with Bootstrap's utility classes.

• Each loader has role="status" and a nested Loading... for accessibility.

Border spinner

Use .spinner-border class to create lightweight spinner/loading indicator.

Example

You can edit and try running this code using Edit & Run option.

    
    
    
      
      
      
      
      
      
    
    
      
Border Spinner
      

        
        
      
    
    

Colors

Border spinner uses currentColor for its border-color, which is customizable with text color utilities. Use text color utilities on a standard spinner.

Example

You can edit and try running this code using Edit & Run option.

    
    
    
      
      
      
      
      
      
    
    
      
Colored Spinner
      

        
      
      

        
      
      

        
      
      

        
      
      

        
      
      

        
      
      

        
      
      

        
      
    
    

Why not use border-color utilities? Border spinners have transparent border on one side, overridden by .border-{color} utilities.

Growing spinner

• You can change the spin type of spinner to the grow spinner. It technically doesn't rotate, but it repeatedly grows.

• Use .spinner-grow class to create grow spinner.

Example

You can edit and try running this code using Edit & Run option.

    
    
    
      
      
      
      
      
      
    
    
      
Growing Spinner
      

        
      
    
    

This spinner uses currentColor to change its appearance with text color utilities.

Example

You can edit and try running this code using Edit & Run option.

    
    
    
      
      
      
      
      
      
    
    
      
Growing color Spinners
      

        
      
      

        
      
      

        
      
      

        
      
      

        
      
      

        
      
      

        
      
      

        
      
      

        
      
    
    

Alignment

Bootstrap spinners are designed with rems, currentColor, and display: inline-flex. They are easily resizable, recolorable, and alignable.

Margin

For simple spacing, use margin utilities like .m-4.

Example

You can edit and try running this code using Edit & Run option.

    
    
    
      
      
      
      
      
      
    
    
      
Margin
      

        
      
    
    

Placement

Bootstrap spinners can be placed using flexbox utilities, float utilities, or text alignment utilities.

Flex

Use flexbox placement classes to set the position of spinners.

Example

You can edit and try running this code using Edit & Run option.

    
    
    
      
      
      
      
      
      
    
    
      
Flex placement at start, center, end
      

        

          
        
      
      

        

          
        
      
      

        

          
        
      
    
    

You can change spinner alignment using flexbox placement.

Example

You can edit and try running this code using Edit & Run option.

    
    
    
      
      
      
      
      
      
    
    
      

        
Flex placement
        

      
    
    

Float

Use float placement classees to set the position of spinners.

Example

You can edit and try running this code using Edit & Run option.

    
    
    
      
      
      
      
      
      
    
    
      
Float placement at start and end
      

        

          
        
      

      

        

          
        
      
    
    

Text align

Use .text-align placement classes to set the position of spinners items.

Example

You can edit and try running this code using Edit & Run option.

    
    
    
      
      
      
      
      
      
    
    
      
Text Align at start, center, end
      

        

          
        
      
      

        

          
        
      
      

        

          
        
      
    
    

Size

Spinner size can be used to create spinners of various sizes.

• For small-size spinners, use .spinner-border-sm and .spinner-grow-sm classes.

• For medium-size spinners, use .spinner-border-md and .spinner-grow-md classes.

Example

You can edit and try running this code using Edit & Run option.

    
    
    
      
      
      
      
      
      
    
    
      
Small Size Spinner
      

        
      
      

        
      
      
Medium Size Spinner
      

        
      
      

        
      
    
    

To modify the dimensions as required, use custom CSS or inline styles.

Example

You can edit and try running this code using Edit & Run option.

    
    
    
      
      
      
      
      
      
    
    
      
Spinner using custom CSS
      

        
      
      

        
      
    
    

Buttons

• Button spinners are used to show an action that is currently processing. Replace spinner element text with button text if required.

• Use .btn and .spinner-border class to create spinner button.

Example

You can edit and try running this code using Edit & Run option.

    
    
    
      
      
      
      
      
      
    
    
      
Spinner Buttons
      
        
        
      
      
        
        Wait...
      
    
    

Use .btn and .spinner-grow class to create growing spinner buttons.

Example

You can edit and try running this code using Edit & Run option.

    
    
    
      
      
      
      
      
      
    
    
      
Growing Spinner Buttons
      
        
        Wait...
      
      
        
       Wait...