Skeleton

Pulsing placeholder shapes for loading content: lines, boxes and composable layouts.

INSTALL

1pnpm dlx @sayagodev/mo add skeleton

Or import the files from the package (no copy):

1import "@sayagodev/mo/css/skeleton.css";

EXAMPLES

Skeleton text

1<div class="vstack gap-2 w-100" aria-hidden="true">2  <output role="status" class="skeleton line"></output>3  <output role="status" class="skeleton line"></output>4  <output role="status" class="skeleton line"></output>5</div>6

Skeleton card

1<div class="vstack gap-4 w-100" style="max-width: 24rem" aria-hidden="true">2  <output role="status" class="skeleton" style="width: 100%; height: 8rem"></output>3  <div class="hstack gap-4">4    <output role="status" class="skeleton box"></output>5    <div class="vstack gap-2" style="flex: 1">6      <output role="status" class="skeleton line"></output>7      <output role="status" class="skeleton line" style="width: 60%"></output>8    </div>9  </div>10  <output role="status" class="skeleton line"></output>11  <output role="status" class="skeleton line" style="width: 80%"></output>12</div>13

USAGE

1<output role="status" class="skeleton line"></output>2 3<output role="status" class="skeleton box"></output>

API

NAMEKINDDESCRIPTION

.skeletonclassPulsing placeholder; needs role="status"

.skeleton.lineclassFull-width text line, 1rem tall

.skeleton.boxclass4rem square block for avatars and thumbs

FILES

src/css/skeleton.css

Install:mo add skeleton

THEMING · PLAYGROUND

This is the exact component from the examples above, wearing a completely different theme. Edit the tokens and --mo-* hooks in the editor — autocomplete knows them all — and the preview obeys in real time. Your CSS always wins.

Global tokens

--accent--radius

Preview

Your CSS

Try it: type --mo- for the component hooks, or edit any value — the preview obeys in real time.