A placeholder for what is loading: a bar (:line), a round shape (:circle, 36 px) or a block (:block,
40 px), with a shimmer that stops under prefers-reduced-motion or with animate={false}. A line has
three heights, size :md (14 px, a text line), :sm (12 px, a row of a list) and :xs (10 px, the label
of a number); for anything else size it with class (h-4 w-40). The shimmer runs from the soft line
to the --shimmer token and back.
A single skeleton is decoration (aria-hidden). Wrap the placeholders of one loading area in
skeleton_group/1, which tells assistive technology once that the area is busy.
Summary
Functions
One placeholder shape.
The area the skeletons stand for: a busy status that is named once.
Functions
One placeholder shape.
Attributes
shape(:atom) - Defaults to:line. Must be one of:line,:circle, or:block.size(:atom) - the height of a:line: 14, 12 or 10 px. Defaults to:md. Must be one of:md,:sm, or:xs.animate(:boolean) -falsefor a still placeholder. Defaults totrue.class(:any) - Defaults tonil.- Global attributes are accepted.
The area the skeletons stand for: a busy status that is named once.
Attributes
label(:string) (required) - what is loading, for assistive technology.class(:any) - Defaults tonil.- Global attributes are accepted.
Slots
inner_block(required) - the skeletons of the area.