Skeleton
Placeholder skeletons for loading states: a full paragraph composition (avatar/title/rows) plus single-shape placeholder blocks (oas-skeleton-item), with controlled loading toggle, three animation effects, list repetition, per-row widths, and an anti-flicker delay.
Basic usage
Basic usage
Combinations
Combinations
Effect
effect comes in three modes: sheen (sweeping highlight), pulse (breathing opacity), and none (static, default). active is the boolean shortcut for sheen (kept for compatibility); effect takes precedence over active — an explicit effect="none" overrides active, and invalid values fall back to the active rule.
Three effects
Animation duration and skeleton colors can be customized via CSS variables: --oas-skeleton-duration (animation duration), --oas-skeleton-color (base color), and --oas-skeleton-sheen (sheen highlight color).
Loading toggle
loading controls the switch between skeleton and real content: loading="true" (or omitted) renders the skeleton, loading="false" renders the real content in the default slot. The skeleton container is aria-hidden="true" internally (purely decorative, silent to screen readers); hosts are advised to set aria-busy="true" on the loading region and remove it when done, so screen readers perceive the loading state.
Loading toggle
Anti-flicker delay
delay (milliseconds): showing the skeleton is delayed after loading becomes true; during the delay window neither the skeleton nor the content renders — if the request completes within the window, the skeleton never appears (fast requests don't flash a skeleton).
Anti-flicker delay (delay=500ms)
List count
count repeats the whole skeleton group (avatar/title/rows) N times — ideal for list loading placeholders.
count=3
Per-row widths
widths is a comma-separated list overriding each row's width in order; uncovered rows keep the alternating default widths (92% / 76%), and extra entries beyond the row count are ignored.
widths=100%,80%,45%
Single shapes: oas-skeleton-item
oas-skeleton-item renders a single-shape placeholder block, complementing the full composition: combine blocks freely into cards, tables, forms, and any layout. type has seven values: text (text row, default), title, avatar (circle), button (button-shaped), input (input-shaped), image (image block), and rect (generic rectangle).
Seven types
width / height accept free CSS values and override each type's default size inline; effect follows the same semantics as oas-skeleton (self-controlled when used standalone, default none).
Custom sizes
Recipes
Card placeholder (avatar + title + two text rows):
Card
Table placeholder (rows × columns grid):
Table rows
Form placeholder (three inputs + submit button):
Form
Accessibility
Skeletons and oas-skeleton-item are purely decorative: their internal elements are aria-hidden="true" and expose nothing to screen readers. Host-side recommendation: set aria-busy="true" on the loading region container (remove it when data arrives) and give the region an accessible name (e.g. role="region" + aria-label), so screen readers perceive "region updating" instead of announcing each skeleton block.
API
oas-skeleton
Attributes
| Attribute | Description | Type | Default |
|---|---|---|---|
active | Whether to enable the shimmer animation | boolean | — |
avatar | Whether to show the avatar placeholder | boolean | — |
count | Repeat count of the whole skeleton group (list scenarios), default 1 | string | 1 |
delay | Anti-flicker delay (ms): the skeleton shows only after this window once loading turns true; if loading finishes within the window the skeleton never appears; neither skeleton nor content renders inside the window | string | — |
effect | Animation: sheen / pulse / none (default); wins over active (active remains as a sheen shortcut) | string | — |
loading | Controlled toggle: true (default) renders the skeleton, "false" renders the default slot content | string | true |
rows | Number of paragraph rows | string | 3 |
title | Whether to show the title placeholder (title is a presence-only switch, its value is not rendered; absorbed from the host on read so no native hover tooltip remains) | string | — |
widths | Comma-separated per-row widths (e.g. 100%,80%,45%), overriding the default text row widths inline | string | — |
Slots
| Name | Description |
|---|---|
| default | Real content outlet: rendered when loading="false" (skeleton and content both live in shadow DOM, toggled via hidden) |
CSS Variables
| CSS Variable | Default |
|---|---|
--oas-skeleton-color | var(--oas-color-bg-hover) |
--oas-skeleton-duration | 1.5s |
--oas-skeleton-sheen | var(--oas-color-border) |