Spinner

Create an animated loading spinner.

Usage

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

<div uk-spinner></div>
Copy to clipboard
  • <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>
Copy to clipboard
  • <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 NameAffected Classes
hook-spinner.uk-spinner
hook-misc*