In Bootstrap 5, spinners are used to indicate that a task or process is in progress or loading. Spinners can be displayed as animated icons or as a rotating border. Here's an example of how to create spinners in Bootstrap 5:

1. Animated Spinner:

html
<div class="spinner-border" role="status">
    <span class="visually-hidden">Loading...</span>
</div>

This code snippet will display a default animated spinner.

2. Colored Spinners:

You can add additional classes to change the color of the spinner:

html
<div class="spinner-border text-primary" role="status">
    <span class="visually-hidden">Loading...</span>
</div>

In this example, the spinner will be displayed in the primary color. You can replace `text-primary` with other Bootstrap color classes such as `text-success`, `text-info`, `text-warning`, or `text-danger`.

3. Growing Spinners:

Instead of an animated spinner, you can use a growing spinner that expands and contracts:

html
<div class="spinner-grow" role="status">
    <span class="visually-hidden">Loading...</span>
</div>

Similar to the animated spinner, you can also customize the color of the growing spinner by adding color classes like `text-primary`, `text-success`, etc.

Remember to include the necessary Bootstrap CSS file in your project for the spinners to display correctly.

About the Author

Silan Software

Silan Software is one of the India's leading provider of offline & online training for Java, Python, AI (Machine Learning, Deep Learning), Data Science, Software Development & many more emerging Technologies.

We provide Academic Training || Industrial Training || Corporate Training || Internship || Java || Python || AI using Python || Data Science etc