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
<CPlaceholder> component and a grid column propx (e.g.,
xs=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
<CPlaceholder>s are based on the typographic style of the parent element. Customize them with
Animate placeholders with
animation="wave" to better convey the perception of something being actively loaded.