Skip to content

Progressbar

Progressbar displays task progress over time.

It communicates how much work has completed (determinate) or that work is ongoing (indeterminate), without requiring user interaction.

Quick start

import bootstack as bs

app = bs.App()

pb = bs.Progressbar(app, maximum=100, value=40)
pb.pack(fill="x", padx=20, pady=20)

app.mainloop()

When to use

Use Progressbar when:

  • progress is linear and measurable

  • users benefit from seeing completion percentage

  • tracking task progress over time

Consider a different control when...

  • You want a more expressive, dashboard-style indicator — use Meter instead

  • You need to show capacity or fullness — use FloodGauge instead

  • You need a compact status indicator — use Badge for text-based status

Appearance

Styling with accent

Use accent to indicate intent or severity:

bs.Progressbar(app, accent="success")
bs.Progressbar(app, accent="warning")
bs.Progressbar(app, accent="danger")

Design System

See Design System for color tokens and theming guidelines.

Examples & patterns

Value model

  • Determinate: shows progress between 0 and maximum

  • Indeterminate: animates continuously to indicate ongoing work

pb.configure(mode="indeterminate")
pb.start()

Common options

  • value — current progress value

  • maximum — maximum value (default 100)

  • mode="determinate" | "indeterminate" — progress mode

  • length — length of the progressbar in pixels

  • orient="horizontal" | "vertical" — orientation

Updating progress

pb = bs.Progressbar(app, maximum=100)
pb.pack()

# Update progress programmatically
pb.configure(value=50)

# Or step by a value
pb.step(10)

Behavior

  • Determinate mode updates visually as value changes

  • Indeterminate mode runs an animation until stopped

  • Use start() to begin indeterminate animation

  • Use stop() to halt indeterminate animation

# Start indeterminate animation
pb.configure(mode="indeterminate")
pb.start(interval=10)  # interval in milliseconds

# Stop animation
pb.stop()

Reactivity

Progressbar can be updated dynamically by binding to signals:

progress = bs.Signal(0)
pb = bs.Progressbar(app, value=progress)

# Update progress
progress.set(50)  # Progressbar updates automatically

Signals

See Signals for reactive programming patterns.

Additional resources

  • Meter — dashboard-style gauge indicators

  • FloodGauge — capacity/level indicators

  • Badge — compact status indicators

Framework concepts

API reference