HelixOverviewComponentsMapsGraphIntroductionInstallationDeriving a themeSandboxTheme builderVisual testingCortexDocsEngramBuildingTraceBuildingRecallDeclaredServicesInsightsGet in touchSource on GitHub
Loading the reference
SkeletonView SourceEdit in SandboxView MarkdownCopy MarkdownOpen in ClaudeOpen in CursorA placeholder shown in place of content that is still loading.StableSince 0.1.0FeedbackUsageimport'@fusion.dev/helix/skeleton'import'@fusion.dev/helix-headless/skeleton'Preview
API ReferenceRoothelix-skeletonA placeholder shown in place of content that is still loading.
PropTypeDescriptioneffect"none"|"pulse"How the placeholder shows it is waiting: a sweep when unset, pulse to
fade the fill in and out, or none to sit still.labelstringDefault""What is loading, read out as the placeholder's name, such as "Loading
profile".linesnumberHow many lines of text the placeholder stands for, with shape="text".loadingbooleanDefaultfalseWhether the content inside is still loading, which keeps it inert and
draws the placeholder over it.shape"text"|"circle"The shape of the placeholder: text, circle, or a block when unset.
ReadTypeDescriptionwhenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)The content the skeleton stands in for, which sizes it. Optional.
PartDescriptioncontentThe box around the content, hidden while loading.lineEach line of a lines paragraph, which is also a skeleton part.linesThe column holding a lines paragraph, drawn only for shape="text" with two or more lines.sheenThe highlight swept across the shape. Hidden for effect="pulse" and effect="none".skeletonThe placeholder shape, or each line of a lines paragraph.
CSS PropertyDescription--skeleton-block-sizeThe height of the block shape, which is the shape when shape is unset. Defaults to the control height.--skeleton-colorThe placeholder's fill.--skeleton-durationHow long one sweep or one pulse takes.--skeleton-last-line-sizeThe width of the last line of a lines paragraph. Defaults to 60%.--skeleton-radiusThe corner of the block shape.--skeleton-sheen-colorThe highlight the sweep carries across the fill.--skeleton-sizeThe diameter of the circle shape.
Custom stateDescriptionsettledSet one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.wrappingThe skeleton holds content, an element or words, and takes that content's size. Line breaks and spaces alone are not content.
Roothelix-headless-skeletonA placeholder shown in place of content that is still loading.
PropTypeDescriptionlabelstringDefault""What is loading, read out as the placeholder's name, such as "Loading
profile".loadingbooleanDefaultfalseWhether the content inside is still loading, which keeps it inert and
draws the placeholder over it.
ReadTypeDescriptionwhenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)The content the skeleton stands in for, which sizes it. Optional.
PartDescriptioncontentThe box around the content, inert while loading.sheenThe highlight inside the shape, which the styled tier sweeps across it. Empty, and drawn by no rule on this tier.skeletonThe placeholder shape.
Custom stateDescriptionsettledSet one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.wrappingThe skeleton holds content, an element or words, and takes that content's size. Line breaks and spaces alone are not content.
Examples
NameDescriptionEffectsThe three effects: the sweep at rest, pulse for a dense list, and none for a placeholder that sits still.LoadingA skeleton around real content takes its size, and shows the content once loading is gone.ParagraphA paragraph of three lines from one element, with lines, the last line shorter.PreviewA circle and two lines of text, shown in place of a profile that is still loading.PreviewA circle and two lines of text, shown in place of a profile that is still loading.