Component · Feedback

Skeleton

a shimmering placeholder for content that is still loading, in three shapes.

Example

Playground

shape
 

Where available

React
Angular
Web Components
Blazor
Tokens

Using it

the same component, named idiomatically per target. one CSS contract underneath, so they render identically.

TargetReferencePackage
React <Skeleton> @design-foundry/lucent-react
Angular <lucent-skeleton> @design-foundry/lucent
Web Components <lucent-skeleton> @design-foundry/lucent-wc
Blazor <LucentSkeleton> DesignFoundry.Lucent

API

PropTypeDefaultDescription
shape line | circle | block line line = text row · circle = 40px avatar · block = media (set height inline).