Progress primitive parts
The Progress primitive consists of two parts: Progress.Root which contains all parts, and Progress.Indicator which shows progress visually and makes it accessible to assistive technologies.
Radix Primitives · all subjects
progress
18 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.
Progress.Root props
Progress.Root has the following props: asChild (boolean, default false, changes the rendered element and merges props/behavior), value (number | null, the progress value), max (number, the maximum progress value), and getValueLabel (function with signature (value: number, max: number) => string, gets accessible label text in human-readable format; if not provided, value is read as percentage of max).
Progress.Root data attributes
Progress.Root supports three data attributes: [data-state] with values 'complete', 'indeterminate', or 'loading'; [data-value] containing the current value; and [data-max] containing the max value.
Progress.Indicator props
Progress.Indicator has the following props: asChild (boolean, default false, changes the rendered element and merges props/behavior).
Progress.Indicator data attributes
Progress.Indicator supports three data attributes: [data-state] with values 'complete', 'indeterminate', or 'loading'; [data-value] containing the current value; and [data-max] containing the max value.
Progress basic composition example
import { Progress } from "radix-ui"; export default () => ( <Progress.Root> <Progress.Indicator /> </Progress.Root> );
Progress default value label behavior
If getValueLabel is not provided on Progress.Root, the value label is automatically read as the numeric value as a percentage of the max value.
Progress indeterminate state value undefined
Explicitly allow value={undefined} to represent an indeterminate state in Progress, matching the current practical behaviour.
Progress component basic usage
The Progress component displays a progress bar related to a task. It is a themed wrapper around the Progress primitive and supports common margin props.
Progress size prop values
The Progress component has a size prop that controls the size of the progress bar. Valid values are '1', '2', and '3', with each increasing the visual size.
Progress variant prop values
The Progress component has a variant prop that controls the visual style. Valid values are 'classic', 'surface', and 'soft'.
Progress color prop
The Progress component has a color prop that assigns a specific color to the progress bar. Valid color values include 'indigo', 'cyan', 'orange', 'crimson', 'gray', and other theme colors.
Progress highContrast prop
The Progress component has a highContrast prop (boolean) that increases color contrast of the progress bar with the background when set to true.
Progress radius prop values
The Progress component has a radius prop that assigns a specific radius value to the progress bar. Valid values are 'none', 'small', and 'full'.
Progress value prop for controlled progress
The Progress component has a value prop that provides a precise indication of task progress. When set, the progress bar displays a determined progress state showing the specific percentage.
Progress duration prop for indeterminate animation
The Progress component has a duration prop that indicates an approximate duration of an indeterminate task. Once the duration times out, the progress bar will start an indeterminate animation. The value is specified as a CSS duration string, such as '30s'.
Progress component use case over Spinner
When an approximate duration can be estimated, the Progress component is useful over Spinner because Spinner does not provide any visual cues towards the progress of the task.
Progress basic example without props
A Progress component can be rendered with no props to display a default indeterminate progress bar.