Spinners

XS

Portrait Phones
<576px

SM

Landscape Phones
≥576px to <768px

MD

Tablets
≥768px to <992px

LG

Laptops
≥992px to <1200px

XL

Desktops
≥1200px

Spinners

.spinner-border & role="status" & .visually-hidden

Spinners [colors]

.text-* = { primary, secondary, success, danger, warning, etc. } &

Spinners [Growing]

.spinner-grow & role="status" & .visually-hidden

Spinners [Margin]

.spinner-border & .m-5 & role="status" & .visually-hidden

Spinners [Placement]

.d-flex & .justify-content-center || .align-items-center
.spinner-border & role="status" &
.visually-hidden
Loading...
Spinners
<div class="spinner-border" role="status">
<span class="visually-hidden">
Loading...
</span>
</div>
About

Bootstrap “spinners” can be used to show the loading state in your projects. They’re built only with HTML and CSS, meaning you don’t need any JavaScript to create them.
You will, however, need some custom JavaScript to toggle their visibility. Their appearance, alignment, and sizing can be easily customized with our amazing utility classes. For accessibility purposes, each loader here includes role="status" and a nested <span class="visually-hidden">Loading...</span>.

Spinners-Color
<div class="spinner-border text-primary" role="status">
<span class="visually-hidden">
Loading...
</span>
</div>
<div class="spinner-border text-secondary" role="status">
<span class="visually-hidden">
Loading...
</span>
</div>
<div class="spinner-border text-success" role="status">
<span class="visually-hidden">
Loading...
</span>
</div>
<div class="spinner-border text-danger" role="status">
<span class="visually-hidden">
Loading...
</span>
</div>
<div class="spinner-border text-warning" role="status">
<span class="visually-hidden">
Loading...
</span>
</div>
<div class="spinner-border text-info" role="status">
<span class="visually-hidden">
Loading...
</span>
</div>
<div class="spinner-border text-light" role="status">
<span class="visually-hidden">
Loading...
</span>
</div>
<div class="spinner-border text-dark" role="status">
<span class="visually-hidden">
Loading...
</span>
</div>
Spinners-Grow
<div class="spinner-grow" role="status">
<span class="visually-hidden">
Loading...
</span>
</div>
adding two classes is possible

see example below

<div class="spinner-grow text-primary" role="status">
<span class="visually-hidden">
Loading...
</span>
</div>
Spinners-Margin
<div class="spinner-border m-5" role="status">
<span class="visually-hidden">
Loading...
</span>
</div>
Spinners-Placement [justify-content-center]
<div class="d-flex justify-content-center">
<div class="spinner-border" role="status">
<span class="visually-hidden">
Loading...
</span>
</div>
</div>
Spinners-[align-items-center]
<div class="d-flex align-items-center">
<strong>
Loading...
</strong>
<div class="spinner-border ms-auto" role="status" aria-hidden="true"></div>
</div>
Spinners-[Floats]
<div class="clearfix">
<div class="spinner-border float-end" role="status">
<span class="visually-hidden">
Loading...
</span>
</div>
</div>