Feedback

Loading & skeleton

Spinners and placeholder shapes.

Loading

Inline loading indicator — a rotating ring or three staggered dots (bounce/fade/scale), in five sizes. CSS-only, no JS. Mirrors Fluxon's loading/1.

Variants

ring plus the three dot styles.

Sizes

xs through xl scale ring diameter and dot size.

API reference

Props and slots, introspected from the component.

Prop	Type	Default	Description
`class`	`any`	`nil`	Extra classes merged onto the root element.
`label`	`string`	`"Loading"`	Accessible label for aria-label and screen-reader text.
`size`	`xs \| sm \| md \| lg \| xl`	`"md"`	Scales ring diameter / dot size (xs ~0.75rem … xl ~2rem).
`variant`	`ring \| dots-bounce \| dots-fade \| dots-scale`	`"ring"`	Spinner style: rotating ring or three-dot bounce/fade/scale.

Skeleton

A decorative, dependency-free loading placeholder. Match the geometry of the content it replaces, hide the placeholder from assistive technology, and put aria-busy="true" plus an accessible label on the surrounding region. Animation is disabled automatically when reduced motion is requested.

Profile loading state

Compose the same primitive into avatar, title, metadata, and body shapes.

<section aria-busy="true" aria-label="Loading profile">
  <.skeleton style="width: 3rem; height: 3rem; border-radius: 999px;" />
  <.skeleton style="width: 12rem; height: 1rem;" />
  <.skeleton style="width: 8rem; height: .75rem;" />
  <.skeleton style="height: 5rem;" />
</section>

Inline geometry

class and style are intentionally the only geometry controls; content and timing remain caller-owned.

API reference

Props and slots, introspected from the component.

Prop	Type	Default	Description
`class`	`any`	`nil`	Extra classes merged onto the root element.
`label`	`string`	`nil`	Opt-in polite announcement: wraps the skeleton in a `role="status"` region.
`style`	`any`	`nil`	Inline CSS for custom placeholder geometry.
`variant`	`block \| text \| circle`	`"block"`	Placeholder shape: generic block, text line, or circle.