Notifications
unread notification
Emily Johnson
commented on a task in
Design Sprint
12 minutes ago
upload notification
Michael Lee
uploaded files to
Marketing Assets
25 minutes ago
Just now
alert
Sophia Ray
flagged an issue in
Bug Tracker
40 minutes ago
event notification
David Kim
scheduled a meeting for
UX Review
1 hour ago
edit
Isabella White
updated the document in
Product Specs
2 hours ago
30 minutes ago
Spinners
Examples
Indicate the loading state of a component or page with Bootstrap spinners, built entirely with HTML, CSS, and no JavaScript.
Spinners on Bootstrap
<div class="spinner-border m-2" role="status">
<span class="visually-hidden">Loading...</span>
</div>
Use border spinners as lightweight loading indicators.
<div class="spinner-border text-primary m-2" role="status"></div>
<div class="spinner-border text-secondary m-2" role="status"></div>
<div class="spinner-border text-success m-2" role="status"></div>
<div class="spinner-border text-danger m-2" role="status"></div>
<div class="spinner-border text-warning m-2" role="status"></div>
<div class="spinner-border text-info m-2" role="status"></div>
<div class="spinner-border text-light m-2" role="status"></div>
<div class="spinner-border text-dark m-2" role="status"></div>
Use text color utilities like
.text-primary
,
.text-success
, or
.text-danger
to style the spinner, which inherits its color from
currentColor
.
<div class="d-flex justify-content-center">
<div class="spinner-border" role="status"></div>
</div>
Bootstrap spinners use
rem
,
currentColor
, and
inline-flex
for easy sizing and alignment.
<button class="btn btn-primary" type="button" disabled>
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span><span class="visually-hidden">Loading...</span>
</button>
<button class="btn btn-primary" type="button" disabled>
<span class="spinner-border spinner-border-sm me-1" role="status" aria-hidden="true"></span>
Loading...
</button>
<button class="btn btn-primary" type="button" disabled>
<span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span> <span class="visually-hidden">Loading...</span>
</button>
<button class="btn btn-primary" type="button" disabled>
<span class="spinner-grow spinner-grow-sm me-1" role="status" aria-hidden="true"></span>
Loading...
</button>
<div class="spinner-grow m-2" role="status">
<span class="visually-hidden">Loading...</span>
</div>
Bootstrap spinners use
rem
,
currentColor
, and
inline-flex
for easy resizing, coloring, and alignment.
<div class="spinner-grow text-primary m-2" role="status"></div>
<div class="spinner-grow text-secondary m-2" role="status"></div>
<div class="spinner-grow text-success m-2" role="status"></div>
<div class="spinner-grow text-danger m-2" role="status"></div>
<div class="spinner-grow text-warning m-2" role="status"></div>
<div class="spinner-grow text-info m-2" role="status"></div>
<div class="spinner-grow text-light m-2" role="status"></div>
<div class="spinner-grow text-dark m-2" role="status"></div>
The grow spinner also uses
currentColor
, so apply classes like
.text-primary
,
.text-warning
, or
.text-info
to customize its color.
<div class="spinner-border avatar-lg text-primary m-2" role="status"></div>
<div class="spinner-grow avatar-lg text-secondary m-2" role="status"></div>
<div class="spinner-border avatar-md text-primary m-2" role="status"></div>
<div class="spinner-grow avatar-md text-secondary m-2" role="status"></div>
<div class="spinner-border avatar-sm text-primary m-2" role="status"></div>
<div class="spinner-grow avatar-sm text-secondary m-2" role="status"></div>
<div class="spinner-border spinner-border-sm m-2" role="status"></div>
<div class="spinner-grow spinner-grow-sm m-2" role="status"></div>