Skip to content
PorabuildHeroGPUI component library
v0.14.0 · Apache-2.0
HeroGPUI

Feedback

Progress Bar

Show determinate or indeterminate progress.

Rust
use herogpui::components::progress::ProgressBar;

ProgressBar on docs.rsSource 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

Labels and values use 14px text with a 20px line height, independent of the surrounding text style. An element expression with window: &mut Window and cx: &mut App in scope.

Rust
use herogpui::prelude::ProgressBar;
use herogpui::gpui::prelude::*;
use herogpui::gpui::px;
use herogpui::gpui;

gpui::div()
    .flex()
    .flex_col()
    .items_start()
    .justify_center()
    .gap(px(12.))
    .children(vec![gpui::div()
        .w(px(256.))
        .child(
            ProgressBar::new("progress-bar")
                .value(65.0)
                .label("Uploading")
                .radius(px(4.))
                .show_value_label(true),
        )
        .into_any_element()])

Colors

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

Rust
use herogpui::prelude::{Color, ProgressBar};
use herogpui::gpui::prelude::*;
use herogpui::gpui::px;
use herogpui::gpui;

gpui::div()
    .flex()
    .flex_col()
    .items_start()
    .justify_center()
    .gap(px(12.))
    .children(Color::ALL
        .iter()
        .enumerate()
        .map(|(index, c)| {
            let key = format!("progress-color-{c:?}");
            gpui::div()
                .w(px(256.))
                .child(ProgressBar::new(("progress-color", index))
                                .value(65.0)
                                .color(*c))
                .into_any_element()
        }))

Sizes

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

Rust
use herogpui::prelude::{ProgressBar, Size};
use herogpui::gpui::prelude::*;
use herogpui::gpui::px;
use herogpui::gpui;

gpui::div()
    .flex()
    .flex_col()
    .items_start()
    .justify_center()
    .gap(px(12.))
    .children(vec![
        gpui::div()
            .w(px(256.))
            .child(ProgressBar::new("progress-bar-size-sm")
                        .value(40.0)
                        .size(Size::Sm))
            .into_any_element(),
        gpui::div()
            .w(px(256.))
            .child(ProgressBar::new("progress-bar-size-md")
                        .value(60.0)
                        .size(Size::Md))
            .into_any_element(),
        gpui::div()
            .w(px(256.))
            .child(ProgressBar::new("progress-bar-size-lg")
                        .value(80.0)
                        .size(Size::Lg))
            .into_any_element(),
    ])

Without Label

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

Rust
use herogpui::prelude::ProgressBar;
use herogpui::gpui::prelude::*;
use herogpui::gpui::px;
use herogpui::gpui;

gpui::div()
    .flex()
    .flex_col()
    .items_start()
    .justify_center()
    .gap(px(12.))
    .children(vec![gpui::div()
                 .w(px(256.))
                 .child(ProgressBar::new("progress-bar-no-label").value(65.0))
                 .into_any_element()])

Indeterminate

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

Rust
use herogpui::prelude::ProgressBar;
use herogpui::gpui::prelude::*;
use herogpui::gpui::px;
use herogpui::gpui;

gpui::div()
    .flex()
    .flex_col()
    .items_start()
    .justify_center()
    .gap(px(12.))
    .children(vec![gpui::div()
                 .w(px(256.))
                 .child(ProgressBar::new("progress-bar-indeterminate")
                         .is_indeterminate(true)
                         .label("Uploading"))
                 .into_any_element()])

Custom Value Scale

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

Rust
use herogpui::prelude::ProgressBar;
use herogpui::gpui::prelude::*;
use herogpui::gpui::px;
use herogpui::gpui;

gpui::div()
    .flex()
    .flex_col()
    .items_start()
    .justify_center()
    .gap(px(12.))
    .children(vec![gpui::div()
                 .w(px(256.))
                 .child(ProgressBar::new("progress-bar-custom-scale")
                         .value(320.0)
                         .min_value(0.0)
                         .max_value(500.0)
                         .label("Downloaded")
                         .show_value_label(true)
                         .format_options(herogpui::core::NumberFormat::unit("MB")))
                 .into_any_element()])

Anatomy

Rust types

ProgressBar

Progress Bar 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 Bar 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 Bar styling
MethodValuesDescription
size(Size)Size::Sm | Size::Md | Size::LgSelects the 4, 8 or 12px track height and matching radius.
color(Color)Color::Default | Color::Accent | Color::Success | Color::Warning | Color::DangerSemantic fill color; default uses the contrasting default foreground.
Rust
// 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: 10 entries ported, 8 partial, 1 not ported. Partial rows are marked in the tables; entries not ported are listed under each table with the reason.

Builders

Progress Bar builders
BuilderValuesDefaultDescription
value(f32)number0Current value, clamped to the configured range.
min_value(f32)number0Minimum value used to normalize the fill.
max_value(f32)number100Maximum value used to normalize the fill.
is_indeterminate(bool)true | falsefalseShows the unbounded sweep without reporting a value label.
size(Size)Size::Sm | Size::Md | Size::LgSize::MdSelects the 4, 8 or 12px track height and matching radius.
color(Color)Color::Default | Color::Accent | Color::Success | Color::Warning | Color::DangerColor::AccentSemantic fill color; default uses the contrasting default foreground.
format_options(NumberFormat)PartialIntl.NumberFormatOptions{style: "percent"}Formats valueText; the local formatter covers common numeric styles without locale or CLDR data.
value_label(text)PartialAnyElement—Replaces the generated formatted value text; accepts text rather than arbitrary content.
label(text) + value_content(render) + show_value_label(true)PartialAnyElement | Fn(values: ProgressBarRenderProps) -> AnyElement—The local ValueLabel closure receives all documented values, while the root anatomy is composed through dedicated builders.
value_content(render)Partialnumber—Normalized percentage; uses 0 as the indeterminate stand-in for undefined value.

Parts

Progress Bar parts
PartDescription
ProgressBarRoot layout and progress state owner.
ProgressBarPartialFormatted output beside the label; customized through the value-content closure.
ProgressBarPartialDefault-color clipped track; it is not separately composable.
ProgressBarPartialSemantic determinate fill or indeterminate sweep; it is not separately composable.

States

Progress Bar states
StateBuilderDescription
Determinatefraction_of(value, min_value, max_value)Fill width and output follow the normalized value.
Indeterminateis_indeterminateA 40% fill sweeps with the 1.5s curve; reduced motion leaves it static.
Not ported1 HeroUI entry not ported
Progress Bar states not ported
HeroUI v3Why it is not ported
DisabledThe stylesheet declares disabled treatment, but the documented API has no disabled prop and does not invent one.
AlertMeterProgress CircleSkeletonSpinner