Use loading placeholders for your components or pages to indicate something may still be loading.
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.
How it works
Create placeholders with the
Placeholder component and a grid column prop (e.g.,
to set the
width. They can replace the text inside an element or be added to an existing
component via the
Additional styling is applied to
::before to ensure the
is respected. You may extend this pattern for other situations as needed, or add a
within the element to reflect the height when actual text is rendered in its place.
The use of
aria-hidden="true" only indicates that the element
should be hidden to screen readers. The loading behaviour of the
placeholder depends on how authors will actually use the placeholder styles,
swap the state of the placeholder and inform AT users of the update.
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 props:
Animate placeholders by setting the prop
wave to better
convey the perception of something being actively loaded.