Spinner

In plain words

A spinning circle that says “wait, I’m working on it”.

A spinning arc. Its angle comes from the app clock, so keep a subscription such as pz.every(1 / 30, ...) active while it is shown or it will not move.

ui.spinner · Category: Feedback · Full reference →

Preview

Code

pz.row([
    ui.spinner(),
    ui.spinner(size=24, tint="success"),
    pz.row([ui.spinner(size=14), ui.muted("Indexing project…")], spacing=8, align="center"),
], spacing=24, align="center")

When to use

• For short waits with an unknown duration: connecting, searching, loading a file.
• For long work with known progress use Progress.

Usage

import pyzed as pz
from pyzed import ui

class Loader(pz.App):
    def __init__(self):
        self.loading = True

    def subscription(self):
        return pz.every(1 / 30, lambda: None) if self.loading else None

    def view(self):
        return ui.spinner() if self.loading else ui.label("Done")

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.

Size

size=12

Code

ui.spinner(size=12)

size=16

Code

ui.spinner()

size=24

Code

ui.spinner(size=24)

size=36

Code

ui.spinner(size=36)

Tint

tint="success"

Code

ui.spinner(size=24, tint="success")

tint="warning"

Code

ui.spinner(size=24, tint="warning")

tint="text_muted"

Code

ui.spinner(size=24, tint="text_muted")

With text

Inline

Code

pz.row([ui.spinner(size=14), ui.muted("Indexing project…")], spacing=8, align="center")

In a button

Code

ui.button(pz.row([ui.spinner(size=12, tint="text"), pz.text("Saving")], spacing=6, align="center"))

Events

Spinner 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.spinner

spinner(*, size=16, tint='accent', speed=1.0, theme=None)

A spinning arc for loading states. Its angle comes from the clock, so keep a pz.every(1/30, ...) subscription active while it is shown.

Property	Default	Description
size	16	Size.
tint	"accent"	Semantic color: "accent", "error", "warning", "success", "info" or a token.
speed	1.0	Turns per second.
theme	None	Theme to use instead of the current one (pyzed.theme.current()).

Full reference →

Related

ProgressA thin progress bar in a semantic color.

Empty stateA centered placeholder for empty lists and searches.