Skeleton

SSkeleton is a loading placeholder: it fills the space of upcoming content with a shimmering gray block, which makes the delay feel shorter. Pure CSS with no dependencies; the element is decorative (aria-hidden), so duplicate the loading status as text nearby for screen readers.

Shapes

<template>
  <SSkeleton
    variant="circle"
    :width="48"
    :height="48"
  />
  <SSkeleton
    variant="text"
    width="40%"
  />
  <SSkeleton
    variant="rect"
    width="100%"
    :height="120"
  />
</template>

Placeholder card

<template>
  <SSkeleton
    variant="rect"
    width="100%"
    :height="140"
  />
  <SSkeleton
    variant="text"
    width="70%"
  />
  <SSkeleton
    variant="text"
    width="90%"
  />
</template>

Without animation

<template>
  <SSkeleton
    variant="rect"
    width="200px"
    :height="32"
    :animated="false"
  />
</template>

API

Props

Name	Type	Default	Description
variant	"text" | "rect" | "circle"	"text"	Placeholder shape: a line of text (text), a rectangle (rect) or a circle (circle, e.g. for an avatar).
width	string | number	undefined	Width: a number is treated as pixels, a string as a CSS value ('100%', '12rem').
height	string | number	undefined	Height: a number is treated as pixels, a string as a CSS value. text/circle have a sensible default.
animated	boolean	true	Enables the shimmer animation. Turn it off for a static skeleton or for prefers-reduced-motion.