Spinner

Import

import { Spinner } from '@contentful/f36-components';
// or
import { Spinner } from '@contentful/f36-spinner';

Examples

Variants

Hide code
function SpinnerVariantsExample() {
  return (
    <Stack flexDirection="column">
      <Spinner variant="default" />
      <Spinner variant="primary" />
      <div style={{ background: 'black', padding: '5px' }}>
        <Spinner variant="white" />
      </div>
    </Stack>
  );
}
function SpinnerVariantsExample() {
  return (
    <Stack flexDirection="column">
      <Spinner variant="default" />
      <Spinner variant="primary" />
      <div style={{ background: 'black', padding: '5px' }}>
        <Spinner variant="white" />
      </div>
    </Stack>
  );
}
Open in Playground

Sizes

Hide code
function SpinnerSizesExample() {
  return (
    <Stack flexDirection="column">
      <Spinner size="medium" />
      <Spinner size="small" />
      <Spinner size="large" />
      <Spinner customSize={50} />
    </Stack>
  );
}
function SpinnerSizesExample() {
  return (
    <Stack flexDirection="column">
      <Spinner size="medium" />
      <Spinner size="small" />
      <Spinner size="large" />
      <Spinner customSize={50} />
    </Stack>
  );
}
Open in Playground

With text

It’s possible to use the Spinner with other elements. A very common pattern is using it together with text.

Another good example of the Spinner being used with other components is the loading state of Button component.

Hide code
function SpinnerWithTextExample() {
  return (
    <Stack flexDirection="column">
      <Flex>
        <Text marginRight="spacingXs">Loading</Text>
        <Spinner />
      </Flex>
      <Button isLoading isDisabled>
        Submitting
      </Button>
    </Stack>
  );
}
function SpinnerWithTextExample() {
  return (
    <Stack flexDirection="column">
      <Flex>
        <Text marginRight="spacingXs">Loading</Text>
        <Spinner />
      </Flex>
      <Button isLoading isDisabled>
        Submitting
      </Button>
    </Stack>
  );
}
Open in Playground