Skip to content
kerfjsGitHub

Spinner

Shows that something is working, when you can't say how long it will take.

SourcePackage @kerf-js/veneerTry it

Preview

tsx
import { Spinner } from '@kerf-js/veneer'export function Sizes() {  return (  <>    <Spinner      size="sm"      label="Loading"    />    <Spinner label="Loading" />    <Spinner      size="lg"      label="Loading"    />  </>  )}

Installation

npm install @kerf-js/veneer

Try it

Change the controls: the preview and its code update together. The address keeps what you set, so you can link to it.

Live preview
Controls
Size
Codeupdates as you change the controls
import { Spinner } from '@kerf-js/veneer'<Spinner label="Loading" />

Usage

tsx
import { Spinner } from '@kerf-js/veneer'

Beside text

With words next to it, leave out label: it is then decorative.

tsx
import { Row, Spinner, Text } from '@kerf-js/veneer'export function Inline() {  return (  <Row gap="related">    <Spinner size="sm" />    <Text subtle>Checking the domain</Text>  </Row>  )}

Refreshing

A spinner with a label stands in for a button while a refresh runs.

tsx
import { state } from '@kerf-js/core'import {  Button,  Row,  Spinner,  Stack,  Text} from '@kerf-js/veneer'export function Refresh() {  const busy = state(false)  const when = state('2 minutes ago')  const refresh = () => {    busy.value = true    setTimeout(() => {      busy.value = false      when.value = 'just now'    }, 1400)  }  return (    <Row      justify="between"      gap="group"    >      <Stack gap="hair">        <Text role="heading">storefront logs</Text>        <Text subtle>Updated {when.value}</Text>      </Stack>      {busy.value ? (        <Spinner label="Refreshing logs" />      ) : (        <Button          size="sm"          emphasis="outline"          tone="neutral"          icon="refresh"          onClick={refresh}        >          Refresh        </Button>      )}    </Row>  )}

A waiting panel

Use size set to lg for a spinner that fills a waiting panel.

tsx
import {  Card,  Spinner,  Stack,  Text} from '@kerf-js/veneer'export function Panel() {  return (  <Card>    <Stack      gap="related"      align="center"    >      <Spinner        size="lg"        label="Waiting for the first build"      />      <Text subtle>Waiting for the first build</Text>    </Stack>  </Card>  )}

When to use

Use it for

  • A short wait of unknown length
  • A small area is busy

Reach for something else

  • Progress, when you know how far along it is
  • Skeleton, when you know the shape of what is coming
  • Button, when the button itself started it: use loading

Accessibility

  • label makes it a named status. Without one it is hidden from screen readers.
  • Under reduced motion it pulses instead of turning.

API Reference

PropTypeDefaultDescription
labelstring—Names it for screen readers. Leave it out if there are words beside it.
size"sm" | "md" | "lg"—sm, md or lg.

RelatedProgressSkeletonButton