ensolabs/designsystemet-elm/1.0.0

Designsystemet.Spinner

A spinning loading indicator.

Mirrors Spinner from @digdir/designsystemet-react.

Spinner.view { label = "Henter saker" } [ Spinner.size Spinner.Large ]

React → Elm

  • <Spinner aria-label="…" /> → Spinner.view { label = "…" } []
  • <Spinner aria-hidden /> → Spinner.decorative []
  • data-size="lg" → Spinner.size Spinner.Large

The spinner is an <svg>, so add classes with Svg.Attributes.class, never Html.Attributes.class. The latter sets the className property, which is read-only on SVG elements, so the browser throws a TypeError and your whole view stops rendering.

Spinner.view { label = "Henter saker" } [ SvgAttr.class "size-6 shrink-0" ]
view : { label : String } -> List (Attribute msg) -> Html msg

A spinner announced to screen readers. As in React, aria-label is required unless the spinner is hidden.

Add classes with Svg.Attributes.class, never Html.Attributes.class (it throws on an <svg>).

decorative : List (Attribute msg) -> Html msg

A spinner hidden from screen readers, for when something nearby already says work is in progress (like a busy Button).

Add classes with Svg.Attributes.class, never Html.Attributes.class (it throws on an <svg>).

Sizes

type Size
= TwoExtraSmall
| ExtraSmall
| Small
| Medium
| Large
| ExtraLarge

Spinners have their own size scale, wider than Designsystemet.Size.

size : Size -> Attribute msg

Set the spinner's data-size.