# Spinner

> A spinning arc for loading states. A native Pyzed component for Python desktop GUIs, with a live preview, code examples and its API.

Source: https://albakore.github.io/pyzed/library/spinner/

:::tip[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](https://albakore.github.io/pyzed/library/#feedback) · [Full reference →](https://albakore.github.io/pyzed/reference/ui/#spinner)

**Code:**

```python
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](https://albakore.github.io/pyzed/library/progress/).

## Usage

```python
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

:::note[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

```python
ui.spinner(size=12)
```

```python
ui.spinner()
```

```python
ui.spinner(size=24)
```

```python
ui.spinner(size=36)
```

### Tint

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

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

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

### With text

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

```python
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](https://albakore.github.io/pyzed/guides/events/) and [Events of every component](https://albakore.github.io/pyzed/library/events/).

## Properties and API

### `ui.spinner`

```python
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 →](https://albakore.github.io/pyzed/reference/ui/#spinner)

## Related

- [Progress](https://albakore.github.io/pyzed/library/progress/): A thin progress bar in a semantic color.
- [Empty state](https://albakore.github.io/pyzed/library/empty-state/): A centered placeholder for empty lists and searches.