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 <CPlaceholder> uses
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
size prop: lg, sm, or
xs.
Animate placeholders with animation="glow" or
animation="wave" to better convey the perception of
something being actively loaded.