Spinner

Default Spinner

The most basic implementation of a spinner.

Sizes

Use a different size spinner depending of the size of content you need to reflect a loading state for. For example, a full page load could use a large spinner while a small area such as an input can only fit a tiny spinner.

<Stack justifyContent="space-around" alignItems="flex-end">
    <Stack direction="column" alignItems="center">
        <Spinner size='large' />
        <BodyText size="small" className="m-t-2">Large</BodyText>
    </Stack>
    <Stack direction="column" alignItems="center">
        <Spinner />
        <BodyText size="small" className="m-t-2">Default (Medium)</BodyText>
    </Stack>
    <Stack direction="column" alignItems="center">
        <Spinner size='small' />
        <BodyText size="small" className="m-t-2">Small</BodyText>
    </Stack>
    <Stack direction="column" alignItems="center">
        <Spinner size='tiny' />
        <BodyText size="small" className="m-t-2">Tiny</BodyText>
    </Stack>
</Stack>

<Stack justifyContent="space-around" alignItems="flex-end">
    <Stack direction="column" alignItems="center">
        <Spinner size='large' />
        <BodyText size="small" className="m-t-2">Large</BodyText>
    </Stack>
    <Stack direction="column" alignItems="center">
        <Spinner />
        <BodyText size="small" className="m-t-2">Default (Medium)</BodyText>
    </Stack>
    <Stack direction="column" alignItems="center">
        <Spinner size='small' />
        <BodyText size="small" className="m-t-2">Small</BodyText>
    </Stack>
    <Stack direction="column" alignItems="center">
        <Spinner size='tiny' />
        <BodyText size="small" className="m-t-2">Tiny</BodyText>
    </Stack>
</Stack>

Spinner Container

Use a container around a spinner when implementing above a section of content or page. See Mask for more examples.

To block out an area of content, use a Mask

Importing

import { Spinner } from '@servicetitan/design-system';

Spinner

Default Spinner

Sizes

Spinner Container

Related Components

Importing