Components
Skeleton
A restrained loading placeholder that respects reduced motion.
Props
Native attributes and event handlers are forwarded to the root Div component. Common transitions apply to that root.
Theme entries: skeleton.
| Prop | Type | Default | Description |
|---|---|---|---|
children | Snippet | undefined | Custom content; see the usage notes for its component-specific role. |
class | string | '' | Tailwind utilities merged after the component theme and variants. |
element | HTMLDivElement | null | $bindable(null) | Bindable reference to the composition root. |
inTransition | TransitionProps | undefined | Enter transition override. |
isVisible | boolean | $bindable(true) | Bindable visibility state. |
outTransition | TransitionProps | undefined | Exit transition override. |
theme | Theme | globalTheme | Local Theme instance; defaults to the global theme. |
transition | TransitionProps | [noopTransition, {}] | Shared transition function and options. |
variants | string[] | [] | Ordered component theme variants or cross-component references. |
Default usage
Import Skeleton from sveltewind/components. This example shows its default styling in a usable context.
Loading...Use circle, text, rectangular, or static variants. Place loading announcements on the surrounding content; placeholders are hidden from assistive technology.
Examples
Theme variants
Every variant available for Skeleton in the built-in themes is shown below.
circle — Apply the circle variant.
Loading...rectangular — Apply the rectangular variant.
Loading...static — Apply the static variant.
Loading...text — Apply the text variant.
Loading...Class overrides
Apply rounded-xl border border-primary-500/40 p-4 locally.
Loading...Props and behavior
Bind isVisible and toggle it with a button to control whether the component is rendered.
Loading...Content and values
Provide different aria-label values.
Loading...