Spinner

A spinner can be used to display the loading state when the part of the page is waiting for action results.

Import

copy
import { Spinner } from '@trendmicro/react-styled-ui';
import { Spinner } from '@trendmicro/react-styled-ui';

Usage

EDITABLE EXAMPLE
copy
<Spinner />
<Spinner />

Colors

EDITABLE EXAMPLE
copy
<Stack direction="row" spacing="6x">
  <Spinner color="red:50" />
  <Spinner color="red" />
  <Spinner color="cyan" />
  <Spinner color="rgba(255, 167, 196, 1)" />
  <Spinner color="#8f41e9" />
</Stack>
<Stack direction="row" spacing="6x">
  <Spinner color="red:50" />
  <Spinner color="red" />
  <Spinner color="cyan" />
  <Spinner color="rgba(255, 167, 196, 1)" />
  <Spinner color="#8f41e9" />
</Stack>

Sizes

Use the size prop to change the size of a spinner. You can set the value to xs, sm, md, lg, or xs. The corresponding stroke width is listed below:

EDITABLE EXAMPLE
copy
<Stack direction="row" spacing="6x">
  <Spinner size="xs" />
  <Spinner size="sm" />
  <Spinner size="md" />
  <Spinner size="lg" />
  <Spinner size="xl" />
</Stack>
<Stack direction="row" spacing="6x">
  <Spinner size="xs" />
  <Spinner size="sm" />
  <Spinner size="md" />
  <Spinner size="lg" />
  <Spinner size="xl" />
</Stack>

StrokeWidth

EDITABLE EXAMPLE
copy
<Stack direction="row" spacing="6x">
  <Spinner strokeWidth={1} />
  <Spinner strokeWidth={2} />
  <Spinner strokeWidth={3} />
  <Spinner strokeWidth={5} />
  <Spinner strokeWidth={10} />
</Stack>
<Stack direction="row" spacing="6x">
  <Spinner strokeWidth={1} />
  <Spinner strokeWidth={2} />
  <Spinner strokeWidth={3} />
  <Spinner strokeWidth={5} />
  <Spinner strokeWidth={10} />
</Stack>

Speed

EDITABLE EXAMPLE
copy
<Stack direction="row" spacing="6x">
  <Spinner speed={2.5} />
  <Spinner speed={3} />
  <Spinner speed={3.5} />
  <Spinner speed={4} />
</Stack>
<Stack direction="row" spacing="6x">
  <Spinner speed={2.5} />
  <Spinner speed={3} />
  <Spinner speed={3.5} />
  <Spinner speed={4} />
</Stack>

Props