Skeleton

Placeholder shapes shown while content loads. The size prop (xs, sm, md, lg, xl) sets line height and circle diameter (or pass a pixel number for circles).

Jump to API reference

Import

Vue

import { UiSkeleton } from '@ziyarago/ui/vue'

Text lines

Vue

<UiSkeleton :lines="3" width="320px" />

Shapes

Vue

<UiSkeleton variant="circle" :size="48" />

<UiSkeleton height="120px" width="320px" />

<UiSkeleton :lines="2" width="320px" />

Sizes

Vue

<UiSkeleton size="xs" :lines="2" width="320px" />

<UiSkeleton size="sm" :lines="2" width="320px" />

<UiSkeleton size="md" :lines="2" width="320px" />

<UiSkeleton size="lg" :lines="2" width="320px" />

<UiSkeleton size="xl" :lines="2" width="320px" />

API reference

Shimmering placeholder for content that is loading; use text lines, circles or rectangles that match the final layout.

Props

PropType and valuesDefaultDescription

varianttextcirclerect'text'Shape of the placeholder.

linesnumber1Number of stacked lines. The last of several lines is 60% wide.

widthstring'100%'CSS width of each line or rect.

heightstring—CSS height. Text lines take the height from size.

sizexssmmdlgxl'md'Text line height and gap; for variant "circle" the diameter (24, 32, 40, 56, 72 px) or a number of pixels.

Notes

Purely visual and not announced to assistive tech; pair it with aria-busy on the container.