Mielui · Skeleton

Installation

pnpm dlx @mielui/svelte add skeleton

Usage

SkeletonSwap keeps real children mounted while loading, but makes them inert until visible. Custom placeholder snippets are always inert and should contain no functional controls. Line counts are rounded down and capped at 1,000; negative counts and dimensions become zero, and nonfinite numbers use the defaults.

Use SkeletonSwap around asynchronous content. Fast responses skip the placeholder; once shown, it stays visible long enough to avoid a flash.

import { SkeletonSwap } from '$lib/mielui/components/skeleton';

<SkeletonSwap ready={profile !== null} lines={3} label="Profile">
  {#if profile}<p>{profile.bio}</p>{/if}
</SkeletonSwap>

Examples

Shimmer

Set variant="shimmer" for an animated highlight. The default stays still. Reduced motion disables the highlight.

Rectangle

Circle

Card composition

API reference

Skeleton

Displays a static loading placeholder.

Prop	Type	Default
`variant`	`"default" \| "shimmer" \| undefined`	`'default'`
`children`	`Snippet<[]> \| undefined`	`—`
`class`	`string \| undefined`	`—`
`w`	`number \| undefined`	`—`
`h`	`number \| undefined`	`—`
`unit`	`"em" \| "in" \| "px" \| "rem" \| "%" \| "vh" \| "vw" \| "vmin" \| "vmax" \| "ch" \| "ex" \| "cm" \| "mm" \| "pt" \| "pc" \| undefined`	`'px'`

Skeleton.SkeletonSwap

Prop	Type	Default
`ready` Required	`boolean`	`—`
`children`	`Snippet<[]> \| undefined`	`—`
`skeleton`	`Snippet<[]> \| undefined`	`—`
`lines`	`number \| undefined`	`3`
`lineHeight`	`number \| undefined`	`21`
`barHeight`	`number \| undefined`	`9`
`reserve`	`number \| undefined`	`—`
`delay`	`number \| undefined`	`120`
`minVisible`	`number \| undefined`	`380`
`label`	`string \| undefined`	`—`
`class`	`(string & (ClassValue \| null)) \| undefined`	`—`