Spinner

A Spinner shows that work is in progress. Without a value it spins. With a value it shows how much is done.

Usage#

import { Spinner, SpinnerSize } from "@clawscale/react";

<Spinner size={SpinnerSize.SMALL} />

The spinner has the ARIA role progressbar and the label "loading". Pass aria-label to describe the task.

Examples#

Size#

size sets the diameter in pixels, 10 or more. SpinnerSize holds the common sizes: SMALL (20), STANDARD (50, the default) and LARGE (100).

core/spinner/size.tsx

import { Spinner, SpinnerSize } from "@clawscale/react";

export default function SpinnerSizeExample() {
  return (
    <>
      <Spinner size={SpinnerSize.SMALL} />
      <Spinner size={SpinnerSize.STANDARD} />
      <Spinner size={SpinnerSize.LARGE} />
    </>
  );
}

Intent#

intent colors the moving part of the spinner.

core/spinner/intent.tsx

import { Spinner } from "@clawscale/react";

export default function SpinnerIntent() {
  return (
    <>
      <Spinner />
      <Spinner intent="primary" />
      <Spinner intent="success" />
      <Spinner intent="warning" />
      <Spinner intent="danger" />
    </>
  );
}

Value#

value runs from 0 to 1 and fills that share of the track. The spinner stops spinning and animates between values. For a linear bar, use a Progress bar.

us-east-1100%

eu-west-164%

ap-southeast-218%

core/spinner/value.tsx

import { Spinner } from "@clawscale/react";

const SNAPSHOTS = [
  { region: "us-east-1", value: 1 },
  { region: "eu-west-1", value: 0.64 },
  { region: "ap-southeast-2", value: 0.18 },
];

export default function SpinnerValue() {
  return (
    <>
      {SNAPSHOTS.map(({ region, value }) => (
        <div key={region} style={{ display: "grid", gap: 8, justifyItems: "center", width: 120 }}>
          <Spinner aria-label={`${region} snapshot`} intent={value === 1 ? "success" : "primary"} value={value} />
          <span>{region}</span>
          <span>{Math.round(value * 100)}%</span>
        </div>
      ))}
    </>
  );
}

Props interface#

interface SpinnerProps extends Props, IntentProps, React.HTMLAttributes<T>@clawscale/react

Props	Description
`className`	`string` A space-delimited list of class names to pass along to a child element. Inherited from `Props`
`intent`	`Intent` Visual intent color to apply to element. Inherited from `IntentProps`
`size`	`number` = `SpinnerSize.STANDARD = 50` Width and height of the spinner in pixels. The size cannot be less than 10px.
`tagName`	`keyof React.JSX.IntrinsicElements` = `"div"` HTML tag for the two wrapper elements. If rendering a `<Spinner>` inside an `<svg>`, change this to an SVG element like `"g"`.
`value`	`number` A value between 0 and 1 (inclusive) representing how far along the operation is. Values below 0 or above 1 will be interpreted as 0 or 1 respectively. Omitting this prop will result in an "indeterminate" spinner where the head spins indefinitely.