Spinner

import { Spinner } from "@hel/ui/spinner"
import { Text } from "@hel/ui/text"

When to use it#

Use a spinner for a short wait when you cannot say how long it will take, or how far along it is: saving a form, searching, refreshing a list. It is small and can go anywhere, inside a button, next to a line of text, or in the middle of an empty area.

If the shape of what is loading is known, a Skeleton feels better. If you know how far along the task is, use a Progress bar. A Button has its own loading state, so you do not place a spinner in one yourself.

Import#

Copyimport { Spinner } from "@hel/ui/spinner"

Usage#

Spinner needs no props.

Copy<Spinner label="Loading your orders" />

It is drawn in the color of the text around it, so it works in a label, a message or a card without any styling. Put it inside a Text with a tone, and it takes that tone.

Sizes#

size is xs, sm, md, lg or xl, which are 12, 16, 20, 24 and 32 pixels. The default is md. Use the small ones next to text and the large ones for an area that is loading.

import { Flex } from "@hel/ui/flex"
import { Spinner } from "@hel/ui/spinner"
import { Stack } from "@hel/ui/stack"

Telling screen readers#

A spinner is announced as a status with a name, "Loading" by default. Use label to say what is loading, such as "Loading your orders", so people using a screen reader know too.

When the text beside the spinner already says it, hide the spinner from assistive technology with decorative. Otherwise "Syncing your library" would be read twice.

import { Flex } from "@hel/ui/flex"
import { Spinner } from "@hel/ui/spinner"
import { Stack } from "@hel/ui/stack"

Props#

It also takes the props of a span.