Skip to content
weftGitHub

Spinner

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

SourcePackage @weft-js/warpPlayground

Preview

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

Installation

npm install @weft-js/warp

Usage

tsx
import { Spinner } from '@weft-js/warp'<>  <Spinner size="sm" label="Loading" />  <Spinner label="Loading" />  <Spinner size="lg" label="Loading" /></>

Beside text

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

tsx
import { Row, Spinner, Text } from '@weft-js/warp'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 '@weft-js/core'import { Button, Row, Spinner, Stack, Text } from '@weft-js/warp'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 '@weft-js/warp'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

Playground

Size
import { Spinner } from '@weft-js/warp'<Spinner label="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