HelixOverviewComponentsMapsGraphIntroductionInstallationDeriving a themeSandboxTheme builderVisual testingCortexDocsEngramBuildingTraceBuildingRecallDeclaredServicesInsightsGet in touchSource on GitHub
Loading the reference
LoaderView SourceEdit in SandboxView MarkdownCopy MarkdownOpen in ClaudeOpen in CursorShows that work of unknown length is in progress.StableSince 0.1.0FeedbackUsageimport'@fusion.dev/helix/loader'import'@fusion.dev/helix-headless/loader'Preview
API ReferenceRoothelix-loaderShows that work of unknown length is in progress.
PropTypeDescriptiondelaynumberDefault0How long the loader waits before it shows, in milliseconds, so work that
finishes quickly never flashes one. The attribute also takes a CSS time,
such as 300ms.forstringDefault""The id of the region being loaded, which is marked aria-busy while the
loader is on the page.idlebooleanDefaultfalseWhether no work is in progress. The loader draws nothing of its own, has
no role, and marks no region busy, and what is in the content slot
shows. Clearing it starts delay again.labelstringDefault"Loading"The loader's name, announced by screen readers while the work is in
progress.size"sm"|"md"|"lg"Diameter, from the loader size tokens.variant"pulse"How the loader is drawn. Leave it unset for a spinning arc, or set pulse.
ReadTypeDescriptionwhenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)An icon or logo that stays still at the center. Empty by default.contentWhat the loader stands in for while the work runs, such as a button. It keeps its size, hidden and inert, until idle is set.
PartDescriptioncontentThe box that holds the content slot. Hidden while the work runs, and shown while idle is set.indicatorThe arc that turns.markThe region that holds the slotted content at the center.svgThe rotating circle pair.trackThe full circle behind the indicator.
CSS PropertyDescription--loader-colorColor of the moving arc.--loader-durationHow long one turn of the arc takes, 0.8s by default. With motion reduced the arc turns once every four seconds, whatever this says.--loader-sizeDiameter. Defaults to the size token that size picks, which is 1.5rem at the default density.--loader-track-colorColor of the circle behind the arc.--loader-track-widthWidth of the arc and the circle behind it, in units of a 24-unit drawing. Defaults to 2.
Custom stateDescriptionsettledSet one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.waitingThe loader is waiting out its delay, hidden and silent.
Roothelix-headless-loaderShows that work of unknown length is in progress.
PropTypeDescriptiondelaynumberDefault0How long the loader waits before it shows, in milliseconds, so work that
finishes quickly never flashes one. The attribute also takes a CSS time,
such as 300ms.forstringDefault""The id of the region being loaded, which is marked aria-busy while the
loader is on the page.idlebooleanDefaultfalseWhether no work is in progress. The loader draws nothing of its own, has
no role, and marks no region busy, and what is in the content slot
shows. Clearing it starts delay again.labelstringDefault"Loading"The loader's name, announced by screen readers while the work is in
progress.
ReadTypeDescriptionwhenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)An icon or logo that stays still at the center. Empty by default.contentWhat the loader stands in for while the work runs, such as a button. It keeps its size, hidden and inert, until idle is set.
PartDescriptioncontentThe box that holds the content slot. Hidden while the work runs, and shown while idle is set.indicatorThe arc that turns.markThe region that holds the slotted content at the center.svgThe rotating circle pair.trackThe full circle behind the indicator.
Custom stateDescriptionsettledSet one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.waitingThe loader is waiting out its delay, hidden and silent.
Examples
NameDescriptionContentA loader that stands in for a button while it saves, keeping the button's size, beside one that is idle and shows its button.PreviewA spinner with a label read by screen readers.PreviewA spinner with a label read by screen readers.PulseA loader that pulses, for a wait inside a small space.RegionA loader that names the region it loads with for, which is marked aria-busy while the loader is on the page.SizesThe loader at each size it comes in.With IconAn icon in the middle of the ring, to show what is loading.