Bootstrap 4 Spinners

Bootstrap 4 Spinners

Bootstrap 4 spinners show the loading state of the components.

Steps to create bootstrap 4 spinners.

  • Add .spinner-border to the spinner loader container base class.

Example

General Syntax

Try it now

Source Code

Try it now

Source Code : Output

Bootstrap Spinner

Loading...

Note:Bootstrap spinner is used to show loading state of the web componet inside the web project.

Bootstrap spinners are used to show the loading state of the web component.

Colored Spinners

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

General Syntax

Try it now

Source Code

Try it now

Source Code : Output

Colored Spinners

Loading...
Loading...

Remember: Bootstrap provides different text utilities classes that is used to provide different color to the spinners.

Growing spinner

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

Example

Loading...
Loading...

General Syntax

Try it now

Source Code

Try it now

Source Code : Output

Growing Spinners

Loading...
Loading...

Note: To create growing spinner,assign .spinner-grow to the spinner container.

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...
Loading...
Loading...
Loading...
Loading...

General Syntax

Try it now

Source Code

Try it now

Source Code : Output

Growing Spinners

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

Note: Use bootstrap text utility classes to make colorful growing spinners.

Spinner Size

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

Example

General Syntax

Try it now

Source Code

Try it now

Source Code : Output

Spinner Size

Loading...
Loading...

Note: In the above example, use .spinner-grow-sm or .spinner-border-sm to make smaller spinner size.

Spinner Buttons

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

General Syntax

Try it now

Source Code

Try it now

Source Code : Output

Spinner Buttons

Note:Spinner button can be created easily by assigning spinner inside the button.

Spinner Alignment

flexbox utilities, float utilities, or text alignment are very helpful utilities class that placed spinner to any where in the web page.

Spinner Alignment Using Flex Utility Classes

Example

Center Alignment
Loading...

General Syntax

Try it now

Source Code

Try it now

Source Code : Output

Growing Spinner Alignment

Loading...

Note:In the above example flexbox utility class is used to align the spinners.

Spinner Alignment Using Float

example
Loading...

General Syntax

Try it now

Source Code

Try it now

Source Code : Output

Spinner Alignment Using Float

Loading...

Note: In the above example, .float-right is used to align the spinner to the right of the web page.

Spinner Alignment Using Text Utility Classes

Example
Loading...

General Syntax

Try it now

Source Code

Try it now

Source Code : Output

Spinner Alignment Using Text Utility Classes

Loading...

Note: In the above example, .text-center is used to align the spinner to the right of the web page.

Online Test / Quiz