Placeholders

Examples

Each bar is a placeholder sized by a width utility. They pulse slowly, and stand still for people who ask for less motion.

<section class="card" aria-label="Loading">
	<div class="card-header"><span class="placeholder w-25"></span></div>
	<div class="card-body vstack gap-8">
		<span class="placeholder w-75"></span>
		<span class="placeholder w-50"></span>
		<span class="placeholder w-100"></span>
	</div>
</section>

Accessibility

• Placeholders are empty elements; the region holding them is named "Loading" until the content takes its place.
• Keep the shapes close to the real content, so the page does not jump when it arrives.

Tokens

From css/components/placeholder.css, which declares no custom property of its own.

It reads the theme's --redz-radius-6, --redz-border.

From Bootstrap 5.3