ProgressCircle builder

A ring for work in a place too tight for a bar.

A builder is RenderOnce. Construct and mount it in one expression.

The verified progress-circle scene in studio-dark

The progress-circle scene in studio-light

use gpui_kit::display::progress_circle::ProgressCircle;

Reviewed in progress-circle.

Construct

new(ident: impl Into<Ident>) -> Self

Options

Chain onto the value.

label(label: impl Into<SharedString>) -> Self
fraction(fraction: f32) -> Self
count(done: usize, total: usize) -> Self
display(display: impl Into<SharedString>) -> Self
centre(centre: impl Into<SharedString>) -> Self
stalled(stalled: bool) -> Self
paused(paused: bool) -> Self
on_cancel(handler: impl Fn(&mut Window, &mut App) + 'static) -> Self

Example · progress-circle

fn progress_circle(_window: &mut Window, cx: &mut App) -> AnyElement {
    let theme = cx.theme().clone();
    stack(&theme)
        .w(px(520.0))
        .child(caption(
            &theme,
            "a position exists only when the extent is known",
        ))
        .child(
            row(&theme)
                .gap(px(theme.spacing.lg))
                .child(
                    ProgressCircle::new("scene.progress-circle.upload")
                        .count(3, 12)
                        .label("Uploading artifacts")
                        .centre("25%"),
                )
                .child(
                    ProgressCircle::new("scene.progress-circle.verify")
                        .fraction(0.72)
                        .label("Verifying checksums")
                        .display("72%")
                        .centre("72%"),
                )
                .child(
                    ProgressCircle::new("scene.progress-circle.contact")
                        .label("Contacting the host"),
                ),
        )
        .child(caption(
            &theme,
            "unknown, stalled, and paused work remain different facts",
        ))
        .child(
            row(&theme)
                .gap(px(theme.spacing.lg))
                .child(
                    div()
                        .column()
                        .items_center()
                        .gap_token(&theme, Space::Xs)
                        .child(
                            ProgressCircle::new("scene.progress-circle.stalled")
                                .label("Upload stalled")
                                .stalled(true),
                        )
                        .child(caption(&theme, "Stalled")),
                )
                .child(
                    div()
                        .column()
                        .items_center()
                        .gap_token(&theme, Space::Xs)
                        .child(
                            ProgressCircle::new("scene.progress-circle.paused")
                                .label("Upload paused")
                                .paused(true),
                        )
                        .child(caption(&theme, "Paused")),
                ),
        )
        .child(caption(&theme, "the size ramp"))
        .child(
            row(&theme)
                .gap(px(theme.spacing.lg))
                .child(
                    ProgressCircle::new("scene.progress-circle.xs")
                        .fraction(0.4)
                        .label("Extra small")
                        .xs(),
                )
                .child(
                    ProgressCircle::new("scene.progress-circle.sm")
                        .fraction(0.4)
                        .label("Small")
                        .small(),
                )
                .child(
                    ProgressCircle::new("scene.progress-circle.md")
                        .fraction(0.4)
                        .label("Medium")
                        .medium(),
                )
                .child(
                    ProgressCircle::new("scene.progress-circle.lg")
                        .fraction(0.4)
                        .label("Large")
                        .large(),
                ),
        )
        .into_any_element()
}

Source: crates/gpui-kit/src/display/progress_circle.rs