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.

By default, the placeholder uses the currentColor. This can be overridden with an utility class or custom color.

The size of .placeholder is based on the typographic style of the parent element. Customize them with sizing modifiers: .placeholder-lg, .placeholder-sm, or .placeholder-xs.

Animate placeholders with .placeholder-glow or .placeholder-wave to better convey the perception of something being actively loaded.