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.
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 be added as a modifier class to an existing component.
You can change the
width through grid column classes, width utilities, or inline styles.
By default, the
currentColor. This can be overridden with a custom color or utility class.
The size of
.placeholders are based on the typographic style of the parent element. Customize them with sizing modifiers:
Animate placeholders with
.placeholder-wave to better convey the perception of something being actively loaded.