Progress Bar
Show determinate or indeterminate progress.
1use herogpui::components::progress::ProgressBar;Usage
Labels and values use 14px text with a 20px line height, independent of the surrounding text style.
1use herogpui::prelude::ProgressBar;
2use gpui::prelude::*;
3use gpui::px;
4
5gpui::div()
6 .w(px(256.))
7 .child(
8 ProgressBar::new("progress-bar")
9 .value(65.0)
10 .label("Uploading")
11 .show_value_label(true),
12 )Live HeroGPUI compiled to WebAssembly. Select any example without loading another WASM instance.
Anatomy
Rust types
ProgressBar
Progress Bar is assembled from these builders. The API reference lists each one.
Customization
Appearance builders and theme tokens Progress Bar uses.
Styling
| Style | Description |
|---|---|
flex_col + gap(px(4.)) + justify_between | Uses an equivalent full-width column with a justified label/output row. |
text_size(px(14.)) + line_height(px(20.)) + FontWeight::MEDIUM | Text size, 20px line height and weight match; GPUI does not request tabular numeral font features on the output alone. |
Size => (4/8/12px, micro/hairline/mark radius) + colors.default.color | Track heights, radii, clipping and semantic background follow the size variants. |
relative fill + h_full + rounded(radius) | The local fill occupies the track height and uses its radius. |
progress_fill_color | Default uses the contrasting foreground; other variants use their semantic base color. |
PROGRESS_BAR_FILL_MS + Curve::Out + progress_bar_motion | Determinate changes interpolate from the currently rendered width and preserve position during reversal. |
PROGRESS_BAR_INDETERMINATE_MS + progress_bar_indeterminate_ease + relative(delta * 1.8 - 0.4) | The listener-free fill reproduces the unbounded sweep. |
reduce_motion + relative(0.4) | Reduced motion keeps the indeterminate state legible without sweeping. |
API reference
Builders
| Builder | Type | Default | Description |
|---|---|---|---|
value( | f32 | 0 | Current value, clamped to the configured range. |
min_value( | f32 | 0 | Minimum value used to normalize the fill. |
max_value( | f32 | 100 | Maximum value used to normalize the fill. |
is_indeterminate( | bool | false | Shows the unbounded sweep without reporting a value label. |
size( | Size | Size:: | Selects the 4, 8 or 12px track height and matching radius. |
color( | Color | Color:: | Semantic fill color; default uses the contrasting default foreground. |
format_options( | NumberFormat | {style: "percent"} | Formats valueText; the local formatter covers common numeric styles without locale or CLDR data. |
value_label( | text | — | Replaces the generated formatted value text; accepts text rather than arbitrary content. |
label( | text) + value_content( | — | The local ValueLabel closure receives all documented values, while the root anatomy is composed through dedicated builders. |
value_content( | number | — | Normalized percentage; uses 0 as the indeterminate stand-in for undefined value. |
Parts
| Part | Description |
|---|---|
ProgressBar | Root layout and progress state owner. |
ProgressBar | Formatted output beside the label; customized through the value-content closure. |
ProgressBar | Default-color clipped track; it is not separately composable. |
ProgressBar | Semantic determinate fill or indeterminate sweep; it is not separately composable. |
States
| Builder | State | Description |
|---|---|---|
fraction_of(value, min_value, max_value) | Determinate | Fill width and output follow the normalized value. |
is_indeterminate + progress-bar-indeterminate + reduce_motion | Indeterminate | A 40% fill sweeps with the 1.5s curve; reduced motion leaves it static. |