Progress

In plain words

A bar that fills up to show how much of a task is done.

A thin bar that fills from 0 to max (1.0 by default). tint changes its color and height its thickness.

ui.progress · Category: Feedback · Full reference →

Preview

Code

pz.column([
    ui.progress(0.25),
    ui.progress(0.6, tint="success", height=6),
    ui.progress(37, max=40, tint="warning", height=8),
], spacing=18, width=360)

When to use

• For work whose progress you can measure: downloads, builds, imports.
• When you can’t measure it, show a Spinner.

Usage

import pyzed as pz
from pyzed import ui

class Download(pz.App):
    def __init__(self):
        self.done, self.total = 0, 1

    def update(self, message):
        self.done, self.total = message  # posted from a worker thread with pz.post((done, total))

    def view(self):
        return ui.progress(self.done, max=self.total)

Variants

About these captures

Each capture is recorded by pyzed itself, off-screen at 2x, in One Dark or One Light to match this site’s theme, and cropped to the component so it shows at its real size. The pointer hovers, presses or types into it; a component that does not react to the pointer cycles through a few themes. With reduced motion you see the first frame. Open Code under a capture to see the snippet that draws it; free names such as on_save stand for your own callbacks.

Value

0.1

Code

ui.progress(0.1, width=240)

0.5

Code

ui.progress(0.5, width=240)

1.0

Code

ui.progress(1.0, width=240)

37, max=40

Code

ui.progress(37, max=40, width=240)

Tint

tint="success"

Code

ui.progress(0.7, tint="success", width=240)

tint="warning"

Code

ui.progress(0.7, tint="warning", width=240)

tint="error"

Code

ui.progress(0.7, tint="error", width=240)

Thickness

height=2

Code

ui.progress(0.6, height=2, width=240)

height=4

Code

ui.progress(0.6, height=4, width=240)

height=10

Code

ui.progress(0.6, height=10, width=240)

States and events

label=, show_value=True

Code

pz.container(ui.progress(0.42, label="Downloading", show_value=True), width=300)

Indeterminate (value=None)

Code

pz.container(ui.progress(None, label="Indexing"), width=300)

Base widget

The pz.* widget underneath: no theme, every color and size is yours.

pz.progress_bar

Code

pz.progress_bar(64, max=100, width=240, height=12, accent="#c678dd", bg="#c678dd33", radius=6)

Events

Progress has no events of its own: it shows what you give it. Like every widget it also has the 18 common events (click, double_click, right_click, mouse_enter, drag, key_down, resize…), attached with .on(...): see Events and Events of every component.

Properties and API

ui.progress

progress(
    value,
    *,
    max=1.0,
    tint='accent',
    height=4,
    width='fill',
    label=None,
    show_value=False,
    theme=None,
)

A thin progress bar.

Property	Default	Description
value	required	Progress, or None for an indeterminate bar (keep a pz.every(1/30, ...) subscription while it shows).
max	1.0	Maximum value.
tint	"accent"	Semantic color: "accent", "error", "warning", "success", "info" or a token.
height	4	Thickness.
width	"fill"	Width: pixels, "fill", "shrink" or "fill:N" (proportion).
label	None	Text above the bar.
show_value	False	Adds the percentage at its right.
theme	None	Theme to use instead of the current one (pyzed.theme.current()).

Full reference →

pz.progress_bar

progress_bar(
    value,
    *,
    min=0.0,
    max=1.0,
    width=None,
    height=None,
    accent=None,
    bg=None,
    radius=2.0,
)

A progress bar.

Property	Default	Description
value	required	Current value.
min	0.0	Minimum.
max	1.0	Maximum.
width	None	Width: pixels, "fill", "shrink" or "fill:N" (proportion).
height	None	Height: pixels, "fill", "shrink" or "fill:N" (proportion).
accent	None	Accent color (active part).
bg	None	Background color ("#rrggbb[aa]", (r, g, b[, a]) or "transparent").
radius	2.0	Corner radius.

Full reference →

Related

SpinnerA spinning arc for loading states.

SliderPick a number in a range by dragging.

StatA dashboard number with change and sparkline.