HelixOverviewComponentsMapsGraphIntroductionInstallationDeriving a themeSandboxTheme builderVisual testingCortexDocsEngramBuildingTraceBuildingRecallDeclaredServicesInsightsGet in touchSource on GitHub
Loading the reference
ProgressView SourceEdit in SandboxView MarkdownCopy MarkdownOpen in ClaudeOpen in CursorA bar or ring that shows how far along a task is.StableSince 0.1.0FeedbackUsageimport'@fusion.dev/helix/progress'import'@fusion.dev/helix-headless/progress'Preview
API ReferenceRoothelix-progressA bar or ring that shows how far along a task is.
PropTypeDescriptioncompleteLabelstringDefault"Complete"The words a screen reader hears when the value reaches max, such as
"Upload complete".emphasis"subtle"How strongly the bar is drawn.formatOptionsIntl.NumberFormatOptionsIntl.NumberFormat options the reading is written with, as React Aria's
Meter and ProgressBar take them: a unit, a currency, or a number of
decimals. Written as JSON in the attribute.indeterminatebooleanDefaultfalseWhether the length of the task is unknown. The bar then shows activity
without a value.labelstringDefault"Progress"Accessible name for what is in progress.localestringDefault""The locale the words and the percentage are in, such as fr for 72 %.maxnumberDefault100The total the work is measured against.minnumberDefault0Where the work starts, in the same units as max. Defaults to zero.shape"ring"Whether the value is drawn as a bar or as a ring.showValuebooleanDefaultfalseWhether the reading is shown beside the bar.valuenumberDefault0What has been done so far, in the same units as max.valueTextstringDefault""Text that describes the value when the number alone is not enough, such as
"3 of 8 files".
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.
SlotDescription(default)Words drawn on the bar, or in the middle of a ring, such as the reading. The bar grows to their height, and over the fill they take the fill's own ink.labelA visible label, above a bar and under a ring. Its words name it in place of label.
EventTypeDescriptionhelix-completeHelixCompleteEventThe value reached max from below. Its value is max. Not sent for a bar that starts full.
PartDescriptioncontentThe box holding the words of the default slot, over the track or in the middle of the ring. Carries --progress-fraction.grooveThe unfilled circle under the ring's filled arc.indicatorThe filled part that shows the work done.liveA polite region that says complete-label when the work is done, rendered from that moment. Hide it visually.trackThe full length the work is measured against.valueThe value shown beside the bar when show-value is set.
CSS PropertyDescription--progress-colorFill of the part that is done.--progress-content-colorThe color of the words of the default slot where they are over the track, and in a ring.--progress-content-fill-colorThe color of the words of the default slot where they are over the fill.--progress-content-sizeThe type size of the words of the default slot.--progress-fractionThe value as a fraction of the range, 0 to 1. Pinned to 1 while indeterminate.--progress-label-colorColor of a slotted label.--progress-label-gapSpace between a slotted label and the bar.--progress-label-sizeType size of a slotted label.--progress-radiusHow far the ends of the bar are rounded.--progress-ring-sizeDiameter of the ring.--progress-ring-widthThickness of the ring's stroke.--progress-sizeThickness of the bar.--progress-track-colorFill of the part that is not done.--progress-transition-durationHow long the fill takes to move to a new value. 0s moves it at once.--progress-value-colorThe color of the value shown under show-value.--progress-value-gapThe space between the bar and the value under show-value.--progress-value-sizeThe type size of the value shown under show-value.
Custom stateDescriptioncompleteThe value is at max and the bar is not indeterminate.contentWords are set in the default slot.settledSet one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
Roothelix-headless-progressA bar or ring that shows how far along a task is.
PropTypeDescriptioncompleteLabelstringDefault"Complete"The words a screen reader hears when the value reaches max, such as
"Upload complete".formatOptionsIntl.NumberFormatOptionsIntl.NumberFormat options the reading is written with, as React Aria's
Meter and ProgressBar take them: a unit, a currency, or a number of
decimals. Written as JSON in the attribute.indeterminatebooleanDefaultfalseWhether the length of the task is unknown. The bar then shows activity
without a value.labelstringDefault"Progress"Accessible name for what is in progress.localestringDefault""The locale the words and the percentage are in, such as fr for 72 %.maxnumberDefault100The total the work is measured against.minnumberDefault0Where the work starts, in the same units as max. Defaults to zero.shape"ring"Whether the value is drawn as a bar or as a ring.showValuebooleanDefaultfalseWhether the reading is shown beside the bar.valuenumberDefault0What has been done so far, in the same units as max.valueTextstringDefault""Text that describes the value when the number alone is not enough, such as
"3 of 8 files".
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.
SlotDescription(default)Words drawn on the bar, or in the middle of a ring, such as the reading. Said as the reading where value-text is not set.labelA visible label. Its words name the progress bar in place of label.
EventTypeDescriptionhelix-completeHelixCompleteEventThe value reached max from below. Its value is max. Not sent for a bar that starts full.
PartDescriptioncontentThe box holding the words of the default slot, over the track or in the middle of the ring. Carries --progress-fraction.grooveThe unfilled circle under the ring's filled arc.indicatorThe filled part that shows the work done.liveA polite region that says complete-label when the work is done, rendered from that moment. Hide it visually.trackThe full length the work is measured against.valueThe value shown beside the bar when show-value is set.
CSS PropertyDescription--progress-fractionThe value as a fraction of the range, 0 to 1. Pinned to 1 while indeterminate.
Custom stateDescriptioncompleteThe value is at max and the bar is not indeterminate.contentWords are set in the default slot.settledSet one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
Examples
NameDescriptionEmphasisA subtle bar for a background task, beside a full-strength bar for the task in focus.Format OptionsA value written in a unit with format-options, which takes Intl.NumberFormat options.IndeterminateA task with no known length, shown as a segment that moves along the track.LabelA visible label above the bar, whose words also name it.On The BarThe reading drawn on the bar, from words in its default slot, which are also what it says.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.Value TextA bar that shows its value in words set with value-text.