Progress Circle — HeroGPUI

ProgressCircle on docs.rs Source at v0.14.0

Usage

Showing Usage, live: HeroGPUI compiled to WebAssembly. The canvas has no accessibility tree; each example's description and code below carry the same information.

Usage

An element expression with window: &mut Window and cx: &mut App in scope.

Rust

1
2
3
4
5
6
7
8
9
10
11
12use herogpui::prelude::ProgressCircle;
use herogpui::gpui::prelude::*;
use herogpui::gpui::px;
use herogpui::gpui;

gpui::div()
    .flex()
    .flex_wrap()
    .items_center()
    .justify_center()
    .gap(px(12.))
    .children(vec![ProgressCircle::new().value(60.).into_any_element()])

Determinate value changes interpolate the retained arc over 300ms ease-out stroke transition; reduced motion settles directly. Runs in a view's render: self is the view holding this example's state and cx is its Context<Self>.

Rust

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29use herogpui::prelude::{Button, ProgressCircle, Size, Variant};
use herogpui::gpui::prelude::*;
use herogpui::gpui::px;
use herogpui::gpui;

let circle_transition = self.demo_flag("progress-circle-transition", false);
let circle_value = if circle_transition { 85.0 } else { 25.0 };

gpui::div()
    .flex()
    .flex_wrap()
    .items_center()
    .justify_center()
    .gap(px(12.))
    .children(vec![
        ProgressCircle::new()
            .id("progress-circle-transition-ring")
            .value(circle_value)
            .into_any_element(),
        Button::new("progress-circle-transition-toggle")
            .label(if circle_transition { "Show 25%" } else { "Show 85%" })
            .size(Size::Sm)
            .variant(Variant::Secondary)
            .on_press(cx.listener(move |this, _, _, cx| {
                this.set_demo_flag("progress-circle-transition", !circle_transition);
                cx.notify();
            }))
            .into_any_element(),
    ])

Expand code

Indeterminate

An element expression with window: &mut Window and cx: &mut App in scope.

Rust

1
2
3
4
5
6
7
8
9
10
11
12
13
14use herogpui::prelude::ProgressCircle;
use herogpui::gpui::prelude::*;
use herogpui::gpui::px;
use herogpui::gpui;

gpui::div()
    .flex()
    .flex_wrap()
    .items_center()
    .justify_center()
    .gap(px(12.))
    .children(vec![ProgressCircle::new()
        .is_indeterminate(true)
        .into_any_element()])

With Label

An element expression with window: &mut Window and cx: &mut App in scope.

Rust

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18use herogpui::prelude::ProgressCircle;
use herogpui::gpui::prelude::*;
use herogpui::gpui::px;
use herogpui::gpui;

gpui::div()
    .flex()
    .flex_wrap()
    .items_center()
    .justify_center()
    .gap(px(12.))
    .children(vec![gpui::div()
        .flex()
        .items_center()
        .gap(px(12.))
        .child(ProgressCircle::new().value(75.))
        .child(gpui::div().text_size(px(14.)).child("75% Complete"))
        .into_any_element()])

Custom SVG Props

The stroke keeps a fixed 4/36 view-box ratio as the circle scales; custom SVG attributes are not exposed by this canvas-backed port. An element expression with window: &mut Window and cx: &mut App in scope.

Rust

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20use herogpui::prelude::{ProgressCircle, Size};
use herogpui::gpui::prelude::*;
use herogpui::gpui::px;
use herogpui::gpui;

gpui::div()
    .flex()
    .flex_wrap()
    .items_center()
    .justify_center()
    .gap(px(12.))
    .children(Size::ALL
        .iter()
        .map(|sz| {
            {
                let key = format!("progress-circle-size-{sz:?}");
                ProgressCircle::new().value(60.).size(*sz)
                    .into_any_element()
            }
        }))

Expand code

Colors

An element expression with window: &mut Window and cx: &mut App in scope.

Rust

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20use herogpui::prelude::{Color, ProgressCircle};
use herogpui::gpui::prelude::*;
use herogpui::gpui::px;
use herogpui::gpui;

gpui::div()
    .flex()
    .flex_wrap()
    .items_center()
    .justify_center()
    .gap(px(12.))
    .children(Color::ALL
        .iter()
        .map(|c| {
                {
                    let key = format!("progress-circle-color-{c:?}");
                    ProgressCircle::new().value(70.0).color(*c)
                        .into_any_element()
                }
        }))

Expand code

Sizes

An element expression with window: &mut Window and cx: &mut App in scope.

Rust

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25use herogpui::prelude::{ProgressCircle, Size};
use herogpui::gpui::prelude::*;
use herogpui::gpui::px;
use herogpui::gpui;

gpui::div()
    .flex()
    .flex_wrap()
    .items_center()
    .justify_center()
    .gap(px(12.))
    .children(vec![
        ProgressCircle::new()
            .value(70.0)
            .size(Size::Sm)
            .into_any_element(),
        ProgressCircle::new()
            .value(70.0)
            .size(Size::Md)
            .into_any_element(),
        ProgressCircle::new()
            .value(70.0)
            .size(Size::Lg)
            .into_any_element(),
    ])

Expand code

Anatomy

Rust types

ProgressCircle

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

Customization

Shared appearance belongs on ThemeBuilder::components and .recipe("name"). Typed builders change how Progress Circle looks at one call site. Every builder also carries sx for placement, width and flex: it takes GPUI's own styling methods and refines them over the component's root after the theme, so an instance override wins. Behaviour builders live in the API reference below.

Styling

Progress Circle styling
Method	Values	Description
`size(Size)`	`Size::Sm \| Size::Md \| Size::Lg`	Selects the 20, 28 or 36px track diameter.
`color(Color)`	`Color::Default \| Color::Accent \| Color::Success \| Color::Warning \| Color::Danger`	Semantic fill-circle stroke color.

Rust

1
2
3
4
5
6
7
8// The one slot for caller-owned low-level styling: GPUI's
// styling methods, refined over the root element last.
.sx(|el| {
    el.bg(gpui::rgba(0xffa500ff))             // background
        .text_color(gpui::rgba(0x000000ff))   // text
        .w(gpui::px(13.))                     // size
        .h(gpui::px(12.))
})

API reference

Against HeroUI v3.2.6: 13 entries ported, 5 partial, 1 not ported. Partial rows are marked in the tables; entries not ported are listed under each table with the reason.

Builders

Progress Circle builders
Builder	Values	Default	Description
`id(ElementId)`	`string`	—	Optional GPUI identity. A named ring reports role=progressbar with the same value range as ProgressBar.
`value(f32)`	`number`	`0`	Current progress value, clamped to the configured range.
`min_value(f32)`	`number`	`0`	Minimum value used to normalize progress.
`max_value(f32)`	`number`	`100`	Maximum value used to normalize progress.
`is_indeterminate(bool)`	`true \| false`	`false`	Shows a spinning quarter arc without exposing a value label.
`size(Size)`	`Size::Sm \| Size::Md \| Size::Lg`	`Size::Md`	Selects the 20, 28 or 36px track diameter.
`color(Color)`	`Color::Default \| Color::Accent \| Color::Success \| Color::Warning \| Color::Danger`	`Color::Accent`	Semantic fill-circle stroke color.
`format_options(NumberFormat)`Partial	`Intl.NumberFormatOptions`	`{style: "percent"}`	Formats valueText; the local formatter covers common numeric styles without locale or CLDR data.
`value_content(render) + show_value_label(true)`Partial	`AnyElement \| Fn(values: ProgressCircleRenderProps) -> AnyElement`	—	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.

Parts

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

States

Progress Circle states
State	Builder	Description
`Determinate`	`fraction_of(value, min_value, max_value)`	Arc sweep and value renderer follow the normalized value.
`Indeterminate`	`is_indeterminate`	The track wrapper rotates the quarter arc and its full ring together once per second; reduced motion leaves both layers static.

Not ported1 HeroUI entry not ported

Progress Circle states not ported
HeroUI v3	Why it is not ported
`Disabled`	The stylesheet has a disabled selector, but the documented component has no disabled prop and does not invent one.

Alert Meter Progress Bar Skeleton Spinner

Usage

Usage

Value Transition

Indeterminate

With Label

Custom SVG Props

Colors

Sizes

Anatomy

Customization

Styling

API reference

Builders

Parts

States

Related components