Spinner

Create an animated loading spinner.

Usage

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

<div data-uk-spinner></div>

Something's not working? Feel free to report an issue or edit this snippet .
```
<div data-uk-spinner></div>
```
Something's not working? Feel free to report an issue or edit this snippet .
```
<div data-uk-spinner />
```

Ratio

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

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

Something's not working? Feel free to report an issue or edit this snippet .

<span class="mr-2" data-uk-spinner="ratio: 3"></span>
<span data-uk-spinner="ratio: 4.5"></span>

Something's not working? Feel free to report an issue or edit this snippet .

<div>
  <span className="mr-2" data-uk-spinner="ratio: 3" />
  <span data-uk-spinner="ratio: 4.5" />
</div>

Accessibility

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

The spinner has the status role.

On This Page
Usage
Ratio
Accessibility