5.0.1 • Published 3 months ago

@spark-web/spinner v5.0.1

Weekly downloads
-
License
-
Repository
github
Last release
3 months ago

title: Spinner storybookPath: feedback-overlays-spinner--default

isExperimentalPackage: true

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.

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 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.

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

Props

Spinner

2.0.0-rc.19

7 months ago

2.0.0-rc.2

7 months ago

2.0.0-rc.3

7 months ago

2.0.0-rc.17

7 months ago

2.0.0-rc.4

7 months ago

2.0.0-rc.18

7 months ago

2.0.0-rc.5

7 months ago

2.0.0-rc.15

7 months ago

5.0.1

3 months ago

2.0.0-rc.16

7 months ago

5.0.0

5 months ago

2.0.0-rc.13

7 months ago

2.0.0-rc.0

7 months ago

2.0.0-rc.14

7 months ago

2.0.0-rc.1

7 months ago

2.0.0-rc.11

7 months ago

2.0.0-rc.12

7 months ago

5.0.0-rc.24

5 months ago

2.0.0-rc.10

7 months ago

5.0.0-rc.25

5 months ago

5.0.0-rc.26

5 months ago

5.0.0-rc.27

5 months ago

5.0.0-rc.28

5 months ago

5.0.0-rc.29

5 months ago

2.0.0-rc.6

7 months ago

2.0.0-rc.7

7 months ago

2.0.0-rc.8

7 months ago

2.0.0-rc.9

7 months ago

5.0.0-rc.31

5 months ago

2.0.0-rc.20

6 months ago

2.0.0-rc.21

6 months ago

1.1.0

1 year ago

1.0.8

3 years ago

1.0.7

3 years ago

1.0.6

3 years ago

1.0.5

3 years ago

1.0.4

3 years ago

1.0.2

3 years ago

1.0.1

3 years ago

1.0.3

3 years ago

1.0.0

3 years ago