Skeleton — Vanilla

Loading placeholder with vanilla HTML. Ensure Rizzo CSS is loaded.

Skeleton

Loading placeholder with optional shimmer. Use skeleton--text, skeleton--circle, skeleton--rect. Use role="status" and aria-label="Loading" for screen readers.

Add this component

Run the command below in your project directory. When prompted, select the component(s) you want. The CLI will copy the CSS and component files.

Choose your package manager — click a tab to select, then copy the command.

npm pnpm yarn bun
Live example

HTML

html html 
<span class="skeleton" role="status" aria-label="Loading" aria-busy="true"></span>
<span class="skeleton skeleton--text" role="status" aria-label="Loading" aria-busy="true"></span>
<span class="skeleton skeleton--circle" role="status" aria-label="Loading" aria-busy="true" style="width:3rem;height:3rem;"></span>

Other frameworks: Astro · Svelte · Vue · React