Loading

Versatile loading indicator with multiple variants for showing progress or waiting states

Setup

import { Loading } from '@fragments-sdk/ui';

Examples

Loading preview...

Loading preview...

Loading preview...

Loading preview...

Loading preview...

Loading preview...

Loading preview...

Loading preview...

Props

Prop	Type	Default	Description
`size`	`enumsmmdlgxl`	`md`	Size of the loading indicator
`variant`	`enumspinnerdotspulse`	`spinner`	Visual style of the loading animation
`label`	`string`	`Loading...`	Accessible label for screen readers
`centered`	`boolean`	`false`	Whether to center the loading indicator in its container
`fill`	`boolean`	`false`	Whether to fill the parent container
`overlay`	`boolean`	`false`	Whether to show with a backdrop overlay
`color`	`enumaccentcurrentmuted`	`accent`	Color variant - accent uses theme color, current inherits text color

Usage Guidelines

When to use

Indicating content is being fetched or processed
Showing a pending state while waiting for an async operation
Displaying loading state for buttons, forms, or page sections
Full-screen loading during initial app/page load

When not to use

For showing determinate progress - use Progress component instead
For showing skeleton placeholders - use Skeleton component instead
For AI-specific thinking states - use ThinkingIndicator instead

Best practices

Use spinner variant for general loading states
Use dots variant for chat/messaging contexts
Use pulse variant for subtle, ambient loading
Always provide a meaningful label for screen readers
Consider using Loading.Screen for initial page loads
Use Loading.Inline when loading indicator should flow with text

Accessibility

Component uses role="status" and aria-live="polite"
Always provide descriptive label prop for screen readers
Animations respect prefers-reduced-motion preference