Government of
India
Powered by NeGD | MeitY Government of India® UX4G
Placeholders
Use loading placeholders for your components or pages to indicate something may still be loading.
About #
Developers may improve the user experience of the application by using placeholders. It can be made without JavaScript because they are just developed with HTML and CSS. Toggling their visibility, however, will require some unique JavaScript. With the aid of the utility classes, developers can simply alter their shape, color, and size.
Example #
The example that follows recreates a normal card component with added placeholders to produce a "loading card". The dimensions and proportions of the two are the same.
RESULT
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Go somewhereHow it works #
With the .placeholder class and a grid column class (like.col-6) to specify the width, create placeholders. They may be added to an existing component as a modifier class or may be used to replace text within an element.
To guarantee that the height is respected, there is an addition of extra styling to .btns via ::before. If other scenarios require it, developers can extend this pattern, or developers can put an inside the element to reflect the height when actual text is produced in its place.
<p aria-hidden="true">
<span class="placeholder col-6"></span>
</p>
<a href="#" tabindex="-1" class="btn btn-primary disabled placeholder col-4" aria-hidden="true"></a>RESULT
aria-hidden="true" only indicates that the element should be hidden to screen readers. The loading behavior of the placeholder depends on how authors will actually use the placeholder styles, how they plan to update things, etc. Some JavaScript code may be needed to swap the state of the placeholder and inform AT users of the update.Width #
You can change the width through grid column classes, width utilities, or inline styles.
<span class="placeholder col-6"></span>
<span class="placeholder w-75"></span>
<span class="placeholder" style="width: 25%;"></span>RESULT
Color #
By default, the placeholder uses currentColor. This can be overridden with a custom color or utility class.
<span class="placeholder col-12"></span>
<span class="placeholder col-12 bg-primary"></span>
<span class="placeholder col-12 bg-secondary"></span>
<span class="placeholder col-12 bg-success"></span>
<span class="placeholder col-12 bg-danger"></span>
<span class="placeholder col-12 bg-warning"></span>
<span class="placeholder col-12 bg-info"></span>
<span class="placeholder col-12 bg-light"></span>
<span class="placeholder col-12 bg-dark"></span>RESULT
Sizing #
The size of .placeholders are based on the typographic style of the parent element. Customize them with sizing modifiers: .placeholder-lg, .placeholder-sm, or .placeholder-xs.
<span class="placeholder col-12 placeholder-lg"></span>
<span class="placeholder col-12"></span>
<span class="placeholder col-12 placeholder-sm"></span>
<span class="placeholder col-12 placeholder-xs"></span>RESULT
Animation #
Animate placeholders with .placeholder-glow or .placeholder-wave to better convey the perception of something being actively loaded.
<p class="placeholder-glow">
<span class="placeholder col-12"></span>
</p>
<p class="placeholder-wave">
<span class="placeholder col-12"></span>
</p>RESULT
Sass #
Variables #
$placeholder-opacity-max: .5;
$placeholder-opacity-min: .2;