Spinner

Create an animated loading spinner.

Table of contents

• Usage
• Ratio
• Accessibility

Usage

To create a spinner, add the data-z-spinner attribute to a block element.

<div data-z-spinner></div>

Ratio

Add the ratio: 3 parameter to the data-z-spinner attribute to triple its size – or any other number, depending on how big you want the spinner to be.

<div data-z-spinner="ratio: 3"></div>

Accessibility

The Spinner component automatically sets the appropriate WAI-ARIA roles, states and properties.

• The spinner has the status role.