HelixOverviewDocsComponentsSandboxTheme builderCortexDocsEngramBuildingTraceBuildingRecallDeclaredServicesInsightsGet in touchSource on GitHub
Loading the reference
ProgressView SourceEdit in SandboxView MarkdownCopy MarkdownOpen in ClaudeOpen in CursorShows how far along a task is, when that is known.StableSince 0.1.0FeedbackUsageimport'@fusion.dev/helix/progress'import'@fusion.dev/helix-headless/progress'Preview
API ReferenceRoothelix-progressShows how far along a task is, when that is known.
PropTypeDefaultDescriptionemphasis"subtle"How much ink the bar claims.indeterminatebooleanfalseWhether the work has a knowable end.labelstring"Progress"Accessible name for what is in progress.maxnumber100The total the work is measured against.shape"ring"Whether the value is drawn as a bar or as a ring.showValuebooleanfalseWhether the reading is shown beside the bar.valuenumber0What has been done so far, in the same units as `max`.valueTextstring""A reading for the value, where the number alone does not say enough.
ReadTypeDescriptionfractionnumberWhat is done, as a fraction of the whole, between 0 and 1.whenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
PartDescriptiongrooveThe unfilled circle, under the ring's own sweep.indicatorThe part of it that is done.trackThe full length the work is measured against.valueThe reading beside the bar, under `show-value`.
CSS PropertyDescription--progress-colorFill of the part that is done.--progress-fractionThe value as a fraction of the range, 0 to 1. Pinned to 1 while indeterminate.--progress-ring-sizeDiameter of the ring appearance.--progress-ring-widthThickness of its stroke.
Roothelix-headless-progressShows how far along a task is, when that is known.
PropTypeDefaultDescriptionindeterminatebooleanfalseWhether the work has a knowable end.labelstring"Progress"Accessible name for what is in progress.maxnumber100The total the work is measured against.shape"ring"Whether the value is drawn as a bar or as a ring.showValuebooleanfalseWhether the reading is shown beside the bar.valuenumber0What has been done so far, in the same units as `max`.valueTextstring""A reading for the value, where the number alone does not say enough.
ReadTypeDescriptionfractionnumberWhat is done, as a fraction of the whole, between 0 and 1.whenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
PartDescriptiongrooveThe unfilled circle, under the ring's own sweep.indicatorThe part of it that is done.trackThe full length the work is measured against.valueThe reading beside the bar, under `show-value`.
CSS PropertyDescription--progress-fractionThe value as a fraction of the range, 0 to 1. Pinned to 1 while indeterminate.
ExamplesNameDescriptionCountedA bar that says its own number, in words the reader chose.EmphasisA background task, said quietly beside one that is being watched.IndeterminateA task with no known length, which is a bar that travels.PreviewHow far along a task is, with the number shown.PreviewHow far along a task is, with the number shown.RingThe same progress drawn as a ring.