A standalone Spinner is a status: its label is announced, so make it describe the work. When the surrounding content already says what is loading, set label="" to keep it decorative. A Spinner implies no progress value.
Sizes
Sizes
Default density
Compact density
Restart from the initial state
Show the copyable source
Buttons compose their own Spinner through loading-position, which hides it from assistive technology and marks the Button busy. Prefer that over placing a Spinner inside a Button.
In badges
Badges
Default density
Compact density
Restart from the initial state
Show the copyable source
The badge text already names the activity, so the Spinner stays decorative.
In an input group
Input group
Default density
Compact density
Restart from the initial state
Show the copyable source
<tp-field label="Teammates" description="Looking up people in your workspace.">
<tp-input-group>
<tp-input type="search" name="teammate" value="Priya" placeholder="Search by name or email"></tp-input>
<tp-spinner slot="prefix" size="sm" label="Searching teammates"></tp-spinner>
</tp-input-group>
</tp-field>
A small Spinner in the prefix slot shows a lookup in flight without moving the field.
In an empty state
Empty state
Default density
Compact density
Restart from the initial state
Show the copyable source
Cancel import
Cancel import
<tp-empty-state title="Importing contacts" description="This can take a minute for large address books." media-treatment="icon">
<tp-spinner slot="media" label=""></tp-spinner>
<tp-button variant="outline">Cancel import</tp-button>
</tp-empty-state>
API Reference
Every element also accepts motion-policy.
Attributes
AttributePropertyTypeDefaultDescriptionlabellabelstring'Loading'The status announced while the Spinner is shown; describe the work, or leave it empty when nearby text names it.sizesize'sm' | 'default' | 'lg''default'The extent, following the theme's icon sizes: sm inside badges and fields, lg for a panel that is loading.
Related
Components, widgets and patterns that use this one.