Government of
India
Powered by NeGD | MeitY Government of India® UX4G
Spinners
Indicate the loading state of a component or page with UX4G spinners, built entirely with HTML, CSS, and no JavaScript.
About #
UX4G "spinners" can be used to show the loading state in the projects. They're built only with HTML and CSS, meaning there is no need for any JavaScript to create them. However, there is a need for 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>.
prefers-reduced-motion media query. See the
reduced motion section of our accessibility
documentation.
Border spinner #
Use the border spinners for a lightweight loading indicator.
<div class="spinner-border" role="status"><span class="visually-hidden">Loading...</span></div>
RESULT
Colors #
The border spinner's border-color is determined by currentColor, thus change it using [text color utilities][color]. On the default spinner, developers can use any of the text color utilities.
<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>RESULT
Loading...Loading...Loading...Loading...Loading...Loading...Loading...Loading...
border-color
utilities? Each border spinner specifies a
transparent border for at least one side, so
border-colorutilities would override that.
Growing spinner #
Change to the grow spinner if developers don't want to use a border spinner. It technically doesn't spin, but it does keep growing!
<div class="spinner-grow" role="status"><span class="visually-hidden">Loading...</span></div>
RESULT
Once more, this spinner was created with currentColor, making it simple to modify its appearance using [text color utilities][color]. Along with the supported variations, it is shown here in blue.
<div class="spinner-grow text-primary" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-secondary" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-success" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-danger" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-warning" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-info" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-light" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-dark" role="status">
<span class="visually-hidden">Loading...</span>
</div>RESULT
Loading...Loading...Loading...Loading...Loading...Loading...Loading...Loading...
Alignment
The components rems, currentColor, and display: inline-flex are used to build spinners in UX4G. This makes it simple to adjust their size, color, and alignment.
Margin #
Use [margin utilities] like
.m-5 for easy spacing.
<div class="spinner-border m-5" role="status"><span class="visually-hidden">Loading...</span></div>
RESULT
Placement #
To position spinners precisely where you need them in any circumstance, use the [flexbox utilities][flex], [float utilities][float], or [text alignment][text] utilities.
Flex #
<div class="d-flex justify-content-center"><div class="spinner-border" role="status"><span class="visually-hidden">Loading...</span></div></div>
RESULT
<div class="d-flex align-items-center"><strong>Loading...</strong><div class="spinner-border ms-auto" role="status" aria-hidden="true"></div></div>
RESULT
Floats #
<div class="clearfix"><div class="spinner-border float-end" role="status"><span class="visually-hidden">Loading...</span></div></div>
RESULT
Text align #
<div class="text-center"><div class="spinner-border" role="status"><span class="visually-hidden">Loading...</span></div></div>
RESULT
Size #
Add .spinner-border-sm and .spinner-grow-sm to make a smaller spinner that can quickly be used within other components.
<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>RESULT
Loading...Loading...
Or, use custom CSS or inline styles to change the dimensions as needed.
<div class="spinner-border" style="width: 3rem; height: 3rem;" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow" style="width: 3rem; height: 3rem;" role="status">
<span class="visually-hidden">Loading...</span>
</div>RESULT
Loading...Loading...
Buttons #
Use spinners inside of buttons to show when an action is processing or happening. Additionally, developer can change the wording in the spinner element and use button text as necessary.
<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" role="status" aria-hidden="true"></span>
Loading...
</button>RESULT
<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" role="status" aria-hidden="true"></span>
Loading...
</button>RESULT
CSS #
Variables #
Added in v1.0.1
Spinners now leverage local CSS variables on .spinner-border and .spinner-grow for improved real-time customisation as part of UX4G's evolving CSS variables strategy. Sass is used to set the values for the CSS variables, therefore Sass customization is still available.
Border spinner variables:
--#{$prefix}spinner-width: #{$spinner-width};
--#{$prefix}spinner-height: #{$spinner-height};
--#{$prefix}spinner-vertical-align: #{$spinner-vertical-align};
--#{$prefix}spinner-border-width: #{$spinner-border-width};
--#{$prefix}spinner-animation-speed: #{$spinner-animation-speed};
--#{$prefix}spinner-animation-name: spinner-border;
Growing spinner variables:
--#{$prefix}spinner-width: #{$spinner-width};
--#{$prefix}spinner-height: #{$spinner-height};
--#{$prefix}spinner-vertical-align: #{$spinner-vertical-align};
--#{$prefix}spinner-animation-speed: #{$spinner-animation-speed};
--#{$prefix}spinner-animation-name: spinner-grow;
Small spinner modifier classes are utilized for both spinners to change the values of these CSS variables as necessary. For instance, the following is what the .spinner-border-sm class does:
--#{$prefix}spinner-width: #{$spinner-width-sm};
--#{$prefix}spinner-height: #{$spinner-height-sm};
--#{$prefix}spinner-border-width: #{$spinner-border-width-sm};
Sass variables #
$spinner-width: 2rem;
$spinner-height: $spinner-width;
$spinner-vertical-align: -.125em;
$spinner-border-width: .25em;
$spinner-animation-speed: .75s;
$spinner-width-sm: 1rem;
$spinner-height-sm: $spinner-width-sm;
$spinner-border-width-sm: .2em;Keyframes #
Used for creating the CSS animations for our spinners. Included in scss/_spinners.scss.
@keyframes spinner-border {
to { transform: rotate(360deg) #{"/* rtl:ignore */"}; }
}
@keyframes spinner-grow {
0% {
transform: scale(0);
}
50% {
opacity: 1;
transform: none;
}
}