Skip to main content

Spinner

A Spinner is an outline of a circle which animates around itself indicating to the user that things are processing. A Spinner is shown when it's unsure how long a task will take making it the indeterminate version of a Progress.

Examples​

Live demo

Spinner sizes​

import pglet
from pglet import Spinner, Text

with pglet.page("spinner-size") as page:

page.add(
Text("Spinner sizes", size="xLarge"),
Spinner("Extra small spinner", size="xSmall", label_position="left"),
Spinner("Small spinner", size="small", label_position="left"),
Spinner("Medium spinner", size="medium", label_position="left"),
Spinner("Large spinner", size="large", label_position="left"),
)

Spinner label positioning​

import pglet
from pglet import Spinner, Text

with pglet.page("spinner-label-positioning") as page:

page.add(
Text("Spinner label positioning", size="xLarge"),
Text("Spinner with label positioned below"),
Spinner("I am definitely loading...", label_position="bottom"),
Text("Spinner with label positioned above"),
Spinner("Seriously, still loading...", label_position="top"),
Text("Spinner with label positioned to right"),
Spinner("Wait, wait...", label_position="right"),
Text("Spinner with label positioned to left"),
Spinner("Nope, still loading...", label_position="left"),
)

Properties​

NameTypeDefaultDescription
sizestringmediumThe size of Spinner to render: xSmall, small, medium, large
labelstringThe label to show next to the Spinner.
labelPositionstringbottomThe position of the label in regards of the spinner animation: top, right, left, bottom