Skip to main content

Spinner

Examples

Spinner

View standalone

Spinner provided as a loading indicator in a range of sizes and colors.

Code
<Grid
  columnGap="24px"
  gap="16px"
>
  <Column span={4}>
    <Box
      atoms={{
        blockSize: 'full',
        border: 'default',
        borderRadius: '8px',
        padding: '16px'
      }}
    >
      <Flex
        alignItems="center"
        atoms={{
          blockSize: 'full'
        }}
        justifyContent="center"
      >
        <Spinner
          color="black"
          sizePx={16}
        />
      </Flex>
    </Box>
  </Column>
  <Column span={4}>
    <Box
      atoms={{
        blockSize: 'full',
        border: 'default',
        borderRadius: '8px',
        padding: '16px'
      }}
    >
      <Flex
        alignItems="center"
        atoms={{
          blockSize: 'full'
        }}
        justifyContent="center"
      >
        <Spinner
          color="blue"
          sizePx={24}
        />
      </Flex>
    </Box>
  </Column>
  <Column span={4}>
    <Box
      atoms={{
        blockSize: 'full',
        border: 'default',
        borderRadius: '8px',
        padding: '16px'
      }}
    >
      <Flex
        alignItems="center"
        atoms={{
          blockSize: 'full'
        }}
        justifyContent="center"
      >
        <Spinner
          color="orange"
          sizePx={32}
        />
      </Flex>
    </Box>
  </Column>
  <Column span={4}>
    <Box
      atoms={{
        backgroundColor: 'action-disabled',
        blockSize: 'full',
        border: 'default',
        borderRadius: '8px',
        padding: '16px'
      }}
    >
      <Flex
        alignItems="center"
        atoms={{
          blockSize: 'full'
        }}
        justifyContent="center"
      >
        <Spinner
          color="disabled"
          sizePx={64}
        />
      </Flex>
    </Box>
  </Column>
  <Column span={4}>
    <Box
      atoms={{
        backgroundColor: 'brand-secondary',
        blockSize: 'full',
        border: 'default',
        borderRadius: '8px',
        padding: '16px'
      }}
    >
      <Flex
        alignItems="center"
        atoms={{
          blockSize: 'full'
        }}
        justifyContent="center"
      >
        <Spinner
          color="white"
          sizePx={96}
        />
      </Flex>
    </Box>
  </Column>
  <Column span={4}>
    <Box
      atoms={{
        backgroundColor: 'brand-primary',
        blockSize: 'full',
        border: 'default',
        borderRadius: '8px',
        padding: '16px'
      }}
    >
      <Flex
        alignItems="center"
        atoms={{
          blockSize: 'full'
        }}
        justifyContent="center"
      >
        <Spinner
          color="white"
          sizePx={128}
        />
      </Flex>
    </Box>
  </Column>
</Grid>

Props

color

"black" | "white" | "orange" | "blue" | "disabled"

Default: "black"

sizePx

16 | 24 | 32 | 64 | 96 | 128

Default: 16