Bootstrap 5 Spinners

Bootstrap 5 Spinners

Bootstrap 5 spinners show the loading state of the components.

Example:
Loading...

Steps to create bootstrap 5 spinners.

  • Add .spinner-border to spinner loader container.

General Syntax

Try it now

Source Code

Try it now

Source Code : Output

Spinners

Loading...

Code Explanation

Note:Follow the above mention step to create bootstrap spinner.

Colored Spinners

Steps To create bootstrap 5 colored spinners, use text color utilities classes.

  • Add .spinner-border to spinner loader container.
  • To create colored spinner,use .text-* to the spinner container.
  • Following are the text utilities color classes:.text-primary,.text-secondary,.text-success,.text-danger,.text-warning,.text-info,.text-light,,text-dark.

Example

Loading...
Loading...
Loading...

General Syntax

Try it now

Source Code

Try it now

Source Code : Output

Spinners

Loading...
Loading...
Loading...

Code Explanation

Note: To create different background color to the spinner,assign .text-* utility class to the spinner container base class.

Growing Spinner

Growing spinners glows repeatedly after a certain time duration.It does not spin.To make growing spinner, add .spinner-grow to the spinner container base class.

Example

Loading...
Loading...
Loading...

General Syntax

Try it now

Source Code

Try it now

Source Code : Output

Growing Spinners

Loading...

Code Explanation

Note:To make growing spinner,add .spinner-grow to the spinner container base class.

Colored Growing Spinner

Steps to create colored growing spinners.

  • Add .spinner-grow to spinner loader container.
  • To create colored spinner, add additional .text-* to the spinner container.
  • Following are the text utilities color classes:.text-primary,.text-secondary,.text-success,.text-danger,.text-warning,.text-info,.text-light,.text-dark.

Example

Loading...
Loading...
Loading...
Loading...

General Syntax

Try it now

Source Code

Try it now

Source Code : Output

Colored Growing Spinner

Loading...
Loading...
Loading...

Code Explanation

Note:Follow the above mention concept to create colored growing spinners.

Bootstrap 5 Spinners: Size

To create bootstrap 5 smaller spinner, use either .spinner-border-sm or .spinner-grow-sm class.

Example

Smaller Spinner

Loading...
Loading...

Large Spinner

Loading...
Loading...

General Syntax

Try it now

Source Code

Try it now

Code Explanation

Note: Follow the above mention steps to create larger and smaller spinner size.

Spinner Buttons

To create spinner button,place .spinner-border element within <button>.

Example

General Syntax

Try it now

Source Code

Try it now

Source Code : Output

Spinner Buttons

Code Explanation

Note:Follow the above mention steps to create spinner button.

Bootstrap 5 Spinners: Alignment

Bootstrap 5 spinners can be aligned by following rules:

Spinner Spacing

Margin utility classes are used to provide spacing to the spinner.

General Syntax

Try it now

Source Code

Try it now

Source Code : Output

Spinner Spacing

Loading...

Code Explanation

Note:Margin utility classes are very helpful for providing spacing to the spinner.

Spinner Placement

flexbox utilities, float utilities, or text alignment are very helpful utility classes that placed spinner anywhere on the web page.

Flex

General Syntax

Try it now

Source Code

Try it now

Source Code : Output

Horizontally Spinner Center Alignment

Loading...

Vertically Center Alignment

Loading...

Code Explanation

Note:Spinner can be placed anywhere on the web page using flexbox utilities, float utilities, or text alignment.

Spinner Alignment Using Float

General Syntax

Try it now

Source Code

Try it now

Source Code : Output

Spinner Placement

Loading...

Code Explanation

Note:Spinner can also be placed either left or right using float.

Spinner Center Alignment

General Syntax

Try it now

Source Code

Try it now

Code Explanation

Note:Spinner can also be placed in the center using text utility class.

Online Test / Quiz