v1.0.8

Spinner

Experimental

This component is considered experimental. Reach out to the Spark team to find out more about what this means.

Open in Storybook Edit this page

Installation

Install yarn add @spark-web/spinner

npm @spark-web/spinner

Source GitHub.com

Bundle unpkg.com

Spinner indicates to users that their request is in progress. In most cases you should use the loading prop on a Button instead of using this component directly.

Examples

Tones

The appearance of Spinner can be customised with the tone prop.

Defaults to primary.

Image of a partial circle indicating "loading".Image of a partial circle indicating "loading".Image of a partial circle indicating "loading".Image of a partial circle indicating "loading".

Open in Playroom

const tones = ['secondary', 'critical', 'positive', 'neutral'];

return (
  <Stack align="left" gap="large">
    <Inline gap="large">
      {tones.map(tone => (
        <Spinner key={tone} tone={tone} />
      ))}
    </Inline>
  </Stack>
);

const tones = ['secondary', 'critical', 'positive', 'neutral'];

return (
  <Stack align="left" gap="large">
    <Inline gap="large">
      {tones.map(tone => (
        <Spinner key={tone} tone={tone} />
      ))}
    </Inline>
  </Stack>
);

Image of a partial circle indicating "loading".

Open in Playroom

const backgrounds = [
  // Light
  ['surface', 'positiveLight', 'infoLight', 'cautionLight', 'criticalLight'],
  // Dark
  ['muted', 'positive', 'info', 'caution', 'critical'],
];

return (
  <Stack gap="large">
    {backgrounds.map((backgroundLightness, index) => (
      <Inline key={index} gap="large">
        {backgroundLightness.map(background => (
          <Box
            key={background}
            background={background}
            shadow="medium"
            height="medium"
            width="medium"
            display="flex"
            flexShrink={0}
            alignItems="center"
            justifyContent="center"
          >
            <Spinner />
          </Box>
        ))}
      </Inline>
    ))}
  </Stack>
);

const backgrounds = [
  // Light
  ['surface', 'positiveLight', 'infoLight', 'cautionLight', 'criticalLight'],
  // Dark
  ['muted', 'positive', 'info', 'caution', 'critical'],
];

return (
  <Stack gap="large">
    {backgrounds.map((backgroundLightness, index) => (
      <Inline key={index} gap="large">
        {backgroundLightness.map(background => (
          <Box
            key={background}
            background={background}
            shadow="medium"
            height="medium"
            width="medium"
            display="flex"
            flexShrink={0}
            alignItems="center"
            justifyContent="center"
          >
            <Spinner />
          </Box>
        ))}
      </Inline>
    ))}
  </Stack>
);

Size

Spinners available in two size: xxsmall and xsmall.

Defaults to xsmall.

Image of a partial circle indicating "loading".Image of a partial circle indicating "loading".

Open in Playroom

<Row gap="large">
  <Spinner size="xxsmall" />
  <Spinner size="xsmall" />
</Row>

<Row gap="large">
  <Spinner size="xxsmall" />
  <Spinner size="xsmall" />
</Row>

Props

Spinner

Prop	Type	Description
data?	DataAttributeMap	Sets data attributes for the element.
size?	"xxsmall" \| "xsmall"	The size of the nested radios. Default: `"xxsmall"`
tone?	"neutral" \| "muted" \| "link" \| "disabled" \| "fieldAccent" \| "placeholder" \| "accent" \| "primary" \| "primaryHover" \| "primaryActive" \| "secondary" \| "secondaryHover" \| "secondaryActive" \| "caution" \| "critical" \| "info" \| "positive"	Provide a tone to influence elements of the field, and its input.