Component ProgressBar

ProgressBar

A horizontal progress indicator.

Supports:

• Determinate progress (value in [0.0, 1.0])
• Indeterminate progress (animated)

When to use

• File downloads, syncing, long-running tasks
• Inline progress under a header or in a settings panel

Not a good fit:

• Tiny inline spinners (use Spinner)
• Circular progress indicators (use ProgressCircle)

API

• progress_bar(): constructor (uses caller location to generate a default id)
• id(...): stable identity override
• value(f32): determinate progress in [0.0, 1.0] (clamped)
• indeterminate(bool): indeterminate animation
• height(px(...)): bar height
• track_color(Hsla): override track color
• fill_color(Hsla): override fill color

Layout:

• ProgressBar is w_full() by default.
• Override width from the call site via style: .w(px(...)) / .max_w(px(...)).

Defaults

• Height: 10px
• Track: theme.surface.hover
• Fill: theme.action.primary.bg

Interaction and behavior

• value(...) and indeterminate(true) are mutually exclusive (setting value(...) makes it determinate).
• value is clamped to [0.0, 1.0].

Example: Determinate

use gpui::px;
use yororen_ui::component::progress_bar;

let view = progress_bar().value(0.65).w(px(240.));

Example: Indeterminate

use gpui::px;
use yororen_ui::component::progress_bar;

let view = progress_bar().indeterminate(true).w(px(240.));