Bootstrap 4 Spinner

Bootstrap 4 Spinner is a component that provides a visual indication of an ongoing process. It is used to show that a loading process is taking place and the user needs to wait for the process to complete. Bootstrap 4 Spinner is designed to be customizable and can be used to match the look and feel of your website or application.

How to Use Bootstrap 4 Spinner

Installation

Bootstrap 4 Spinner is built on top of Bootstrap 4, so you need to have the Bootstrap 4 CSS and JavaScript files included in your project. You can include them from the CDN or download them from the official Bootstrap website.

HTML Markup

To use Bootstrap 4 Spinner, you need to add the following HTML markup:

<div class="spinner-border" role="status">
  <span class="sr-only">Loading...</span>
</div>

The spinner-border class is used to define the spinner, while the sr-only class is used to provide screen reader access.

Types of Spinners

Bootstrap 4 Spinner comes in two types of spinners: Spinner-border and spinner-grow.

Spinner-border

Spinner-border is a circular spinner that rotates to indicate that a process is ongoing. To use spinner-border, add the following HTML markup:

<div class="spinner-border" role="status">
  <span class="sr-only">Loading...</span>
</div>

Spinner-grow

Spinner-grow is a spinner that fills the width and height of its container while rotating. To use spinner-grow, add the following HTML markup:

<div class="spinner-grow" role="status">
  <span class="sr-only">Loading...</span>
</div>

Customizing Spinner

Bootstrap 4 Spinner can be customized to match the look and feel of your website or application. You can change the size, color, and animation of the spinner.

Size

Bootstrap 4 Spinner is available in three different sizes: small, medium, and large. To change the size of the spinner, add the following classes to the spinner:

• .spinner-border-sm for small spinner-border
• .spinner-border for medium spinner-border
• .spinner-border-lg for large spinner-border

<div class="spinner-border spinner-border-sm" role="status">
  <span class="sr-only">Loading...</span>
</div>

Color

Bootstrap 4 Spinner can be customized to match the color scheme of your website or application. You can change the color of the spinner by setting the color property in CSS.

.spinner-border {
  color: #ff0000;
}

Animation

Bootstrap 4 Spinner comes with two types of animations: border and grow. You can change the animation of the spinner by adding the following classes to the spinner:

• .spinner-border for border spinner
• .spinner-grow for grow spinner

<div class="spinner-grow" role="status">
  <span class="sr-only">Loading...</span>
</div>

Conclusion

Bootstrap 4 Spinner is a visual component that can be used to show that a process is ongoing. It is highly customizable and can be used to match the look and feel of your website or application. With Bootstrap 4 Spinner, you can provide a seamless user experience by providing an indication to the user that a process is ongoing.