Skeleton

Decorative loading placeholder shapes. Always aria-hidden; announce busy state on the host.

Also known as: loading placeholder, shimmer, pulse placeholder

Installation

Install with the CLI, or copy the component source into your project.

Add skeleton (npm)

npx --yes -p github:itsvigneshv/default-file-ui#main df-ui add skeleton

Properties

Decorative loading placeholder. Always aria-hidden; the host must announce busy state elsewhere.

Skeleton

PropTypeDefaultNotes
shape"text" | "block" | "circle""text"Placeholder silhouette.
widthstring-Inline CSS width for this instance.
heightstring-Inline CSS height for this instance.
classNamestring-Additional styles on the root.

Accessibility

Decorative only: The root is always aria-hidden. Pair with a parent aria-busy, a Spinner with a name, or live status copy so assistive technology hears the wait.