Spinner

<zeno-spinner>FeedbackSource

Shows that something is loading when its duration is not known.

import '@usezeno/tokens/css';
import '@usezeno/core/web-components';

Examples

Variants

<zeno-spinner variant="circle"></zeno-spinner>
<zeno-spinner variant="ring"></zeno-spinner>
<zeno-spinner variant="dots"></zeno-spinner>
<zeno-spinner variant="bars"></zeno-spinner>
<zeno-spinner variant="pulse"></zeno-spinner>

Sizes

<zeno-spinner size="xs"></zeno-spinner>
<zeno-spinner size="sm"></zeno-spinner>
<zeno-spinner size="md"></zeno-spinner>
<zeno-spinner size="lg"></zeno-spinner>
<zeno-spinner size="xl"></zeno-spinner>

Label

The label text is not visible. It is the text that assistive technology reads. The default is “Loading”.

<zeno-spinner label="Saving changes"></zeno-spinner>

Attributes and properties

Property	Attribute	Type	Default	Description
variant	variantreflects	'circle' | 'dots' | 'ring' | 'bars' | 'pulse'	'circle'
size	sizereflects	'xs' | 'sm' | 'md' | 'lg' | 'xl'	'md'
label	label	string	'Loading'
testId	–	string	–	Test ID for automated testing From ZenoElement.

Methods

Method	Description
focus(): void	Focus the component or its first focusable element From ZenoElement.
blur(): void	Blur the component or its focused element From ZenoElement.

Events

This element sends no events.

Slots

This element has no slots.

CSS parts

Part
bar
base
dot
fill
track

CSS custom properties

This element documents no custom properties of its own. Style it through its parts and through the tokens it reads.

The element's own source reads no tokens.

Accessibility

Keyboard

This element handles no keys of its own.

Forms

This element is not a form control. It adds nothing to a form's data.

Notes

• Renders a <div> with role="status", aria-live="polite" and aria-busy="true".
• The label text is rendered inside the status region and is hidden visually. Set it to say what is loading.
• The element cannot take focus and has no keyboard behaviour.
• With prefers-reduced-motion: reduce the animation stops. The circle variant then shows a dot in its centre.
• With prefers-contrast: more the spinner uses system colours.

Tests and known gaps

• No tests of its own. The only check is that the element registers and renders (smoke.test.ts).
• Not checked with axe-core.
• Has no Storybook story.

8 of the 11 properties, methods, events, slots and parts above have no description in the source

• the property variant
• the property size
• the property label
• the part bar
• the part base
• the part dot
• the part fill
• the part track

Known gaps:

• aria-busy="true" is always set on the status region itself. aria-busy tells assistive technology to wait before it reads a region, so the label may not be announced.
• With reduced motion, the dots, bars, ring and pulse variants only stop. They get no static mark like the circle variant does.