1. Primitives
  2. Spinner

<Spinner />

Indicate that something is loading for an indeterminate amount of time.
<Card padding={4}>
<Flex justify="center">
<Spinner muted />
</Flex>
</Card>

Properties  

muted?: boolean
size?: number | number[]

Examples  

Centered spinner  

<Card padding={4}>
<Flex align="center" height="fill" justify="center">
<Spinner muted />
</Flex>
</Card>

Centered with text  

<Card padding={4}>
<Flex
align="center"
direction="column"
gap={3}
height="fill"
justify="center"
>
<Spinner muted />
<Text muted size={1}>
Loading some content…
</Text>
</Flex>
</Card>
Or if you want to horizontally align, you can change to direction="row".
<Card padding={4}>
<Flex
align="center"
direction="row" // <-
gap={3}
height="fill"
justify="center"
>
<Spinner muted />
<Text muted size={1}>
Loading some content…
</Text>
</Flex>
</Card>
Made withby folks at