spinner

Oat documentation: https://oat.ink/components/spinner/

Spinner attribute helpers for loading states.

Anatomy

Apply these attributes to the element that visually represents loading. Use busy for accessibility state and one of the size helpers to control presentation.

Recipes

import glaze/oat/spinner
import lustre/element/html

html.div([spinner.busy(), spinner.size(spinner.Large)], [])

import glaze/oat/spinner
import lustre/attribute
import lustre/element/html

html.div([attribute.class("relative")], [
  html.div([], [html.text("Loading profile...")]),
  html.div([spinner.busy(), spinner.size_overlay(spinner.Small)], []),
])

References

MDN aria-busy: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-busy

Types

Size

</>

Spinner size options.

pub type Size {
  Small
  Large
}

Constructors

```
Small
```
```
Large
```

Values

busy

</>

pub fn busy() -> attribute.Attribute(msg)

Set aria-busy="true" to mark content as loading.

overlay

</>

pub fn overlay() -> attribute.Attribute(msg)

Enable overlay spinner styling.

size

</>

pub fn size(size: Size) -> attribute.Attribute(msg)

Set spinner size styling.

size_overlay

</>

pub fn size_overlay(size: Size) -> attribute.Attribute(msg)

Set spinner size with overlay styling.