Skeleton — RenDS Components

About

Overview

Use a skeleton when content is on its way and showing real shapes — line widths, avatar circles, image rectangles — helps the user predict what's coming. For shorter waits inside a button or a small panel, prefer Spinner.

Match the real layout, not the loading state. A skeleton that doesn't look like the final UI introduces a second, jarring layout shift when the data arrives. Mirror the spacing, the line count, and the avatar size of the real component.

Live

Demo

<div class="card-mock">
  <div class="ren-skeleton ren-skeleton-circle"></div>
  <div>
    <div class="ren-skeleton ren-skeleton-line" style="width: 70%"></div>
    <div class="ren-skeleton ren-skeleton-line-sm" style="width: 90%"></div>
    <div class="ren-skeleton ren-skeleton-line-sm" style="width: 60%"></div>
  </div>
</div>

Shapes

Variants

Line

Circle

Rectangle

Reference

API

Class	Effect
`.ren-skeleton`	Base placeholder. Pulsing background, fully rounded corners on small heights.
`.ren-skeleton-line`	Text line. 12 px tall. Combine with `style="width: 70%"` to vary line lengths and avoid the "stack of identical bars" look.
`.ren-skeleton-line-sm`	Smaller line, 10 px tall. For body copy under headings.
`.ren-skeleton-circle`	Avatar / icon placeholder. Use inline width/height to match the real avatar size.
`.ren-skeleton-rect`	Image / hero placeholder. Pair with `aspect-ratio` to lock it to the final image proportions.

Inclusive by default

Accessibility

Mark each skeleton element aria-hidden="true". Loading shapes should not be announced piece by piece.
The container that swaps in the real content should have aria-busy="true" while loading and aria-live="polite" if the change is significant.
Pulse animation respects prefers-reduced-motion — the animation stops automatically when the user opts out.
Don't show a skeleton forever. If a request is slow, swap to a clearer empty state or error message after a few seconds.