<Spinner />
Indicate that something is loading for an indeterminate amount of time.
<Card padding={4}>
<Flex justify="center">
<Spinner muted />
</Flex>
</Card>
muted?: boolean
size?: number | number[]
<Card padding={4}>
<Flex align="center" height="fill" justify="center">
<Spinner muted />
</Flex>
</Card>
<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>