Holo Skeleton

The <holo-skeleton> component renders a decorative (aria-hidden="true") placeholder block while content is loading. Pair it with a surrounding role="status" region if the loading state itself needs to be announced.

When to use

Use it for:

• A placeholder shape that stands in for text, an avatar or a block while content loads, so the layout does not jump.
• Loading states that last long enough to be noticed.

Don’t use it for:

• Showing progress. Use Progress or Spinner.
• Empty or error states. Show a message with Alert.
• Real content. A skeleton carries no information.

Live Previews

Variants

<holo-skeleton variant="circle"></holo-skeleton>
<holo-skeleton variant="text" width="8rem"></holo-skeleton>
<holo-skeleton variant="rect" height="6rem"></holo-skeleton>

Accessibility

The skeleton is purely decorative. The host sets aria-hidden="true", so assistive technology ignores it, and it is not focusable. The shimmer only runs when prefers-reduced-motion: no-preference.

You provide:

• A way to tell non-visual users that content is loading, since the skeleton is hidden from them. Set aria-busy="true" on the loading region, and announce completion, or include a Spinner or Visually Hidden text such as “Loading”.
• Removal of the skeletons when content arrives, and focus handling if the user was waiting.

---

API Reference

Importing

import '@philbob-sideprojects/hololink-ui/holo-skeleton';

Properties

Property	Attribute	Type	Default	Description
height	height	string	—	The rendered height (any valid CSS length, e.g. "1rem", "3rem").
variant	variant	"circle" | "rect" | "text"	'text'	The shape of the placeholder block.
width	width	string	—	The rendered width (any valid CSS length, e.g. "100%", "4rem").

CSS custom properties

Property	Description
--holo-skeleton-bg	Background color of the placeholder.
--holo-skeleton-radius	Corner radius of the text and rect variants.
--holo-skeleton-shimmer-color	Highlight color of the shimmer animation.