Progress Circle — HeroGPUI

Usage

Live example

Rust

1use herogpui::prelude::ProgressCircle;
2
3ProgressCircle::new().value(60.)

Live HeroGPUI compiled to WebAssembly. Select any example without loading another WASM instance.

Rust types

ProgressCircle

Progress Circle is assembled from these builders. The API reference lists each one.

Appearance builders and theme tokens Progress Circle uses.

Progress Circle styling
Style	Description
`flex + items_center + justify_center`	Centered fixed-size root.
`size(Size) => 20 / 28 / 36px`	Pinned desktop diameters are 28px by default, 20px small and 36px large.
`border_color(colors.default.color)`	Full-opacity semantic default track stroke.
`stroke_w = size_px / 9`	Stroke scales to exactly one ninth of the rendered diameter.
`PathBuilder::stroke + filled endpoint discs`	Filled endpoint discs reproduce the SVG arc's round line caps.
`direct fraction repaint`	Value changes redraw immediately because the local canvas has no retained dash-offset transition.
`Color::Default => colors.default.foreground`	Default uses the contrasting foreground while other variants use their semantic base color.
`PROGRESS_CIRCLE_SPIN_MS + progress_circle_spin_turn + reduce_motion`	Indeterminate track rotation and its reduced-motion override.

Progress Circle builders
Builder	Type	Default	Description
`value(f32)`	`f32`	`0`	Current progress value, clamped to the configured range.
`min_value(f32)`	`f32`	`0`	Minimum value used to normalize progress.
`max_value(f32)`	`f32`	`100`	Maximum value used to normalize progress.
`is_indeterminate(bool)`	`bool`	`false`	Shows a spinning quarter arc without exposing a value label.
`size(Size)`	`Size`	`Size::Md`	Selects the 20, 28 or 36px track diameter.
`color(Color)`	`Color`	`Color::Accent`	Semantic fill-circle stroke color.
`format_options(NumberFormat)`	`NumberFormat`	`{style: "percent"}`	Formats valueText; the local formatter covers common numeric styles without locale or CLDR data.
`value_content(render) + show_value_label(true)`	`render) + show_value_label(true`	—	The local ValueLabel closure receives all three documented values, but arbitrary root children are not composed.
`value_content(render)`	`number`	—	Normalized percentage handed to the value renderer.

Progress Circle parts
Part	Description
`ProgressCircle`	Root progress indicator and fixed-size layout box.
`ProgressCircle`	SVG track counterpart represented by a border ring and canvas arc; it is not separately composable.
`ProgressCircle`	Full default-color ring beneath the progress arc.
`ProgressCircle`	Semantic-color canvas arc with normalized sweep; custom SVG attributes are unavailable.

Progress Circle states
Builder	State	Description
`fraction_of(value, min_value, max_value)`	`Determinate`	Arc sweep and value renderer follow the normalized value.
`is_indeterminate + progress-circle-spin + reduce_motion`	`Indeterminate`	A quarter arc completes one linear turn per second; reduced motion leaves the same arc static.