Spinner

Shows that something is loading.

Spinner.tsx

import {Spinner} from 'alinea/components'

export function SpinnerExample() {
  return (
    <>
      <Spinner size="sm" aria-label="Saving" />
      <Spinner aria-label="Loading products" />
      <Spinner size="lg" aria-label="Loading page" />
      <Spinner size="lg" value={68} aria-label="Uploading linen-shirt.jpg" />
    </>
  )
}

Props

A circular progress indicator

PropTypeDefaultDescription

size'sm' | 'default' | 'lg'Default 'default'

valuenumberDefault –Progress from 0 to 100, leave out for an indeterminate spinner

Also accepts className and style, id and aria-* labelling attributes and data-* attributes.