Tutorial

Sign Up

log In

Bootstrap
Bootstrap 5 Spinners

❮ Previous

Next ❯

Spinners in Bootstrap 5 are a flexible component used to indicate loading or ongoing processes in your web application.

Example
<div class="spinner-border" role="status"></div>

Try it yourself

Colored Spinners:

Use the Bootstrap color class:

Example
<div class="spinner-border text-primary" role="status"></div>
<div class="spinner-border text-secondary" role="status"></div>
<div class="spinner-border text-success" role="status"></div>
<div class="spinner-border text-danger" role="status"></div>
<div class="spinner-border text-warning" role="status"></div>
<div class="spinner-border text-info" role="status"></div>
<div class="spinner-border text-light" role="status"></div>
<div class="spinner-border text-dark" role="status"></div>

Try it yourself

Spinners Size:

Use the .spinner-border-sm class to change spinner size:

Example
<div class="spinner-border spinner-border" role="status"></div>
<div class="spinner-border spinner-border-sm" role="status"></div>

Try it yourself

Grow Spinner :

Use the .spinner-grow class to change spinner/loader:

Example
<div class="spinner-grow text-primary" role="status"></div>
<div class="spinner-grow text-secondary" role="status"></div>
<div class="spinner-grow text-success" role="status"></div>
<div class="spinner-grow text-danger" role="status"></div>
<div class="spinner-grow text-warning" role="status"></div>
<div class="spinner-grow text-info" role="status"></div>
<div class="spinner-grow text-light" role="status"></div>
<div class="spinner-grow text-dark" role="status"></div>

Try it yourself

Grow Spinner Size:

Use the .spinner-grow-sm class to change spinner size:

Example
<div class="spinner-grow text-border" role="status"></div>
<div class="spinner-grow spinner-grow-sm" role="status"></div>

Try it yourself

❮ Previous

Next ❯
Whereisstuff is simple learing platform for beginer to advance level to improve there skills in technologies.we will provide all material free of cost.you can write a code in runkit workspace and we provide some extrac features also, you agree to have read and accepted our terms of use, cookie and privacy policy.
© Copyright 2024 www.whereisstuff.com. All rights reserved. Developed by whereisstuff Tech.