Spinner

Spinner

Thymeleaf source

<sl:spinner/>

Rendered HTML

<svg xmlns="http://www.w3.org/2000/svg" class="icon spinner" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" role="status" aria-label="Loading">
  <path d="M21 12a9 9 0 1 1-6.219-8.56"></path>
</svg>

What it says

A spinner is a status (role="status") named “Loading”. Give it an aria-label of its own to say what is loading; the default is the message sl.spinner.label, which you can reword or translate in your messages.properties.

Saying what loadsAn aria-label replaces the default name, "Loading".

Thymeleaf source

<sl:spinner aria-label="Loading invoices"/>

Rendered HTML

<svg xmlns="http://www.w3.org/2000/svg" class="icon spinner" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" role="status" aria-label="Loading invoices">
  <path d="M21 12a9 9 0 1 1-6.219-8.56"></path>
</svg>

For a button that is busy, use <sl:button loading> instead: it shows the spinner, disables the button and announces the busy state. To show a skeleton of the content to come, use <sl:skeleton>.

Sizes

A spinner is 16 pixels, or the size of an icon in the component around it, such as <sl:empty-media variant="icon">. size sets the width and height in pixels.

Sizes

Thymeleaf source

<sl:spinner/>
<sl:spinner size="24"/>
<sl:spinner size="32"/>

Rendered HTML

<svg xmlns="http://www.w3.org/2000/svg" class="icon spinner" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" role="status" aria-label="Loading">
  <path d="M21 12a9 9 0 1 1-6.219-8.56"></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" class="icon spinner" viewBox="0 0 24 24" width="24" height="24" data-icon-size="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" role="status" aria-label="Loading">
  <path d="M21 12a9 9 0 1 1-6.219-8.56"></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" class="icon spinner" viewBox="0 0 24 24" width="32" height="32" data-icon-size="32" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" role="status" aria-label="Loading">
  <path d="M21 12a9 9 0 1 1-6.219-8.56"></path>
</svg>

Reduced motion

For users who ask for reduced motion the spinner turns slower instead of standing still: a frozen arc reads as a broken icon.

Attributes

Attribute	Values	Default	Description
size	number	—	Width and height in pixels. Without it the spinner is 16 pixels, or sized by the surrounding component (as an icon in sl:empty-media).

Every prop can also be set from an expression: th:size="${...}". Any other attribute passes through to the rendered element, and class is appended.