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.
Customize