In the example below, we take a typical card component and recreate it with placeholders applied to create a “loading card”. Size and proportions are the same between the two.
You can change the
width through grid column classes, width utilities, or inline styles.
Animate placehodlers with
.placeholder-wave to better convey the perception of something being actively loaded.
By default, the
currentColor. This can be overriden with a custom color or utility class.
How it works
Create placeholders with the
.placeholder class and a grid column class (e.g.,
.col-6) to set the
width. They can replace the text inside an element or as be added as a modifier class to an existing component.
The size of
.placeholders are based on the typographic style of the parent element. Customize them with sizing modifiers: