Spinner

Create an animated loading spinner.

Usage

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

<div uk-spinner></div>

```
<div uk-spinner></div>
```

Ratio

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

<div uk-spinner="ratio: 3"></div>

<span class="uk-margin-small-right" uk-spinner="ratio: 3"></span>
<span uk-spinner="ratio: 4.5"></span>

Accessibility

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

The spinner has the status role.

Theme development

On your tailwind.config.js file, add the Spinner component within the ui() plugin.

import ui from "franken-ui";

ui({
    components: {
        spinner: {
            hooks: {}
        }
    }
}),

Available hooks

Note If you are developing theme from scratch, you can use all these hooks. If you’re using the shadcn/ui theme, some hooks might not work as they were already in use or removed. Learn more about using hooks.

Hook Name	Affected Classes
`hook-spinner`	`.uk-spinner`
`hook-misc`	`*`