Skeleton <l-skeleton>

Skeletons are used as animated placeholders that mimic the shape of content while it loads. Commonly used to reduce perceived loading time in lists, cards, and dashboards.

HTML tag<l-skeleton>

⏣Native HTML

⬡Progressive

◇Custom

⬢Shadow DOM

Custom Element (no Shadow DOM)

Options

Shapes

Set shape to circle, rect, or text (default).

Code

HTML

<l-skeleton
  shape="text"
  class="w-48"
></l-skeleton>
<l-skeleton
  shape="rect"
  class="h-20 w-48"
></l-skeleton>
<l-skeleton
  shape="circle"
  class="size-12"
></l-skeleton>

Animations

Set animation to pulse (default) or wave.

Code

HTML

<div class="flex flex-col gap-2">
  <l-skeleton
    animation="pulse"
    class="h-4 w-48"
  ></l-skeleton>
  <l-skeleton
    animation="wave"
    class="h-4 w-48"
  ></l-skeleton>
</div>

Examples

Card placeholder

Code

HTML

<div class="flex gap-3 w-64">
  <l-skeleton
    shape="circle"
    class="size-10 shrink-0"
  ></l-skeleton>
  <div class="flex flex-col gap-2 flex-1">
    <l-skeleton
      shape="text"
      class="w-3/4"
    ></l-skeleton>
    <l-skeleton
      shape="text"
      class="w-full"
    ></l-skeleton>
    <l-skeleton
      shape="text"
      class="w-1/2"
    ></l-skeleton>
    <l-skeleton
      shape="rect"
      class="h-24 w-full mt-2"
    ></l-skeleton>
  </div>
</div>

Accessibility

Criteria

Motion

Animation respects prefers-reduced-motion

WCAG2.3.3

Loading state

Wrap skeleton groups in a container with aria-busy="true" and aria-label while loading

WCAG4.1.3

API reference

Importing

JS

import 'luxen-ui/skeleton';

CSS

@import 'luxen-ui/css/skeleton';

Attributes & Properties

shapeAttribute

Shape of the skeleton: text (default), rect, circle

animationAttribute

Animation style: pulse (default), wave

CSS custom properties

--widthName

Width of the skeleton

--heightName

Height of the skeleton