Decorative, CSS-only placeholder for content that is still loading.
The default block variant is full width and one line high; text matches a
line of copy and circle is a round avatar placeholder. Use class or
style to match the geometry of the content it replaces. The skeleton itself
is always hidden from assistive technology. Pass label to opt into a single
polite announcement: the skeleton is wrapped in a role="status" region with
a visually hidden label. When rendering many skeletons, label only one
representative skeleton so the announcement is not repeated.
<.skeleton />
<.skeleton variant="text" />
<.skeleton variant="circle" style="width: 3rem; height: 3rem;" />
<.skeleton label="Loading profile" />Summary
Functions
Attributes
variant(:string) - Placeholder shape: generic block, text line, or circle. Defaults to"block". Must be one of"block","text", or"circle".label(:string) - Opt-in polite announcement: wraps the skeleton in arole="status"region. Defaults tonil.class(:any) - Extra classes merged onto the root element. Defaults tonil.style(:any) - Inline CSS for custom placeholder geometry. Defaults tonil.- Global attributes are accepted. Arbitrary HTML/
phx-*attributes passed through.