Avala Design
← Components/primitives

Loading

Loading + InlineLoading — primitives.

primitivesstablea11y: untested2/3 coverageEdit on GitHub ↗

Live playground

Edit the JSX below — preview updates instantly. Switch brand × tone in the toolbar to see the same component re-themed in place.

LiveOpen all variants in Storybook ↗
Edit JSX — preview updates livereact-live
import { Loading } from "@avala/design";

<Loading size="md">Loading</Loading>

All variants

The Storybook stories file rendered as an iframe — every variant, every size, every state, baselined for visual regression.

primitives-loading--defaultOpen in Storybook →

When to use

  • **Loading** — page or surface-level async waits where layout shape is unknown / variable. Renders centered.
  • **InlineLoading** — inline operation feedback (form submission, button progress, row reload). Has active / finished / error states so screen readers announce completion.

When not to use