Movatterモバイル変換

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 thewidth. They can replace the text inside an element or be added as a modifier class to an existing component.

You can change thewidth through grid column classes, width utilities, or inline styles.

By default, theplaceholder usescurrentColor. 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:.placeholder-lg,.placeholder-sm, or.placeholder-xs.

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