Spinners
Spinners are progress indicators, which can be used to express an unspecified wait time or display the length of a process.
Create amazing Typeform-like forms and pages just by writing Markdown!
About #
Spinners can be used to show loading state in your projects. They're built only with HTML and CSS, meaning you don't need any JavaScript to create them. Their appearance, alignment, and sizing can be easily customized with our utility classes.
Accessibility
Please make sure to keep the following points in mind:- Add the
role="status"
attribute to the spinner and a nested<span class="visually-hidden">Loading...</span>
inside (empty ones). - The animation effect of this component is dependent on the
prefers-reduced-motion
media query. See the reduced motion section of our accessibility documentation.
Border spinners #
Create border spinners using .spinner-border
. The border spinner uses currentColor
for its border-color
, meaning you can customize the color with text color utilities. You can use any of our text color utilities on the standard spinner.
HTML
<div class="spinner-border" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-primary" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-body-secondary" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-body-tertiary" role="status">
<span class="visually-hidden">Loading...</span>
</div>
Growing spinners #
As an alternative to border spinners, you can also create growing spinners using .spinner-grow
. Once again, the color can be changed using text color utilities.
HTML
<div class="spinner-grow" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-primary" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-body-secondary" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-body-tertiary" role="status">
<span class="visually-hidden">Loading...</span>
</div>
Margin and placement #
You can use spacing, flexbox, text alignment, or even float utilities to pad and place spinners in different ways. Some common patterns are shown below.
Loading pictures...
HTML
<!-- Margin, and placement using text alignment -->
<div class="text-center">
<div class="spinner-border text-primary mt-3 mb-2" role="status" aria-hidden="true"></div>
<p>Loading pictures...</p>
</div>
<!-- Horizontally centered using flexbox -->
<div class="d-flex justify-content-center">
<div class="spinner-border" role="status">
<span class="visually-hidden"></span>
</div>
</div>
<!-- Placement using flexbox -->
<div class="d-flex align-items-center">
Loading...
<div class="spinner-border text-body-tertiary ms-auto" role="status" aria-hidden="true"></div>
</div>
Sizing #
Create small spinners using .spinner-border-sm
/ .spinner-grow-sm
, or use custom CSS, inline styles, or utility classes to change the dimensions as needed.
HTML
<!-- Small spinners -->
<div class="spinner-border spinner-border-sm" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow spinner-grow-sm" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<!-- Large spinners using utilities -->
<div class="spinner-border specific-w-50 specific-h-50" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow specific-w-50 specific-h-50" role="status">
<span class="visually-hidden">Loading...</span>
</div>
Buttons #
Use spinners within buttons to indicate an action is currently processing or taking place. You may also swap the text out of the spinner element and utilize button text as needed.
HTML
<button class="btn btn-secondary" 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-secondary" 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-border spinner-border-sm" role="status" aria-hidden="true"></span>
Loading...
</button>
Help us grow
Our main goal is to make Halfmoon the go-to framework for building websites, dashboards and tools. If you believe in our mission, consider becoming a sponsor and help us grow.
You can email us directly if you have any queries. We are always happy to answer.
Subscribe for updates
We will notify you when the framework gets a substantial update. No spam ever.
Follow us on Twitter so that you can stay updated that way.