Signals that something is happening when you cannot say how long it will take.
import { Loading } from "@/fragments/ui";Source<Loading label="Loading content" />npx @usefragments/cli add loadingWrites src/fragments/ui/components/Loading plus what it imports, the globals stylesheet, and .fragments/registry-lock.json, then prints the packages to add. No account, no key.
Your own registry: publish from Fragments Cloud and add --registry org/name. Connect a workspace.
Loading is a compound: import the root and reach its parts through dot notation.
Loading.InlineLoading.Screensm inside controls, xl for a whole page.
import { Stack } from '@/components/Stack';
<Stack direction="row" gap="lg" align="center">
<Loading size="sm" label="Loading" />
<Loading size="md" label="Loading" />
<Loading size="lg" label="Loading" />Three bouncing dots, at home in a message thread.
<Loading kind="dots" label="Sending message" />One breathing dot for ambient background work.
<Loading kind="pulse" label="Syncing" />Accent, muted, or whatever the surrounding text is.
import { Stack } from '@/components/Stack';
<Stack direction="row" gap="lg" align="center">
<Loading color="accent" label="Loading" />
<Loading color="muted" label="Loading" />
<span style={{ color: 'var(--fui-color-info)' }}>Sits on the text baseline mid-sentence.
<p style={{ margin: 0 }}>
Processing your request <Loading.Inline label="Processing" /> please wait…
</p>Fills its container and centres in it.
<div
style={{
width: '200px',
height: '100px',
border: '1px dashed var(--fui-border)',
borderRadius: 'var(--fui-radius-md)',Covers the surface it sits on and names the wait.
<div
style={{
position: 'relative',
contain: 'layout',
width: '300px',
height: '200px',Prop | Type | Default | Description |
|---|---|---|---|
size | enumsmmdlgxl | md | Size of the loading indicator |
kind | enumspinnerdotspulse | spinner | Which animation plays |
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 | Colour. accent uses the theme accent, current inherits the surrounding text colour |