'use client'
import { Spinner } from '@saas-ui/react'
export const SpinnerBasic = () => {
return <Spinner size="sm" />
}
Usage
import { Spinner } from '@saas-ui/react/spinner'<Spinner />Examples
Sizes
Use the size prop to change the size of the spinner.
'use client'
import { HStack } from '@chakra-ui/react'
import { Spinner } from '@saas-ui/react'
export const SpinnerWithSizes = () => {
return (
<HStack gap="5">
<Spinner size="xs" />
<Spinner size="sm" />
<Spinner size="md" />
<Spinner size="lg" />
<Spinner size="xl" />
</HStack>
)
}
Colors
Use the colorPalette prop to change the color scheme of the spinner.
'use client'
import { Stack } from '@chakra-ui/react'
import { Spinner } from '@saas-ui/react'
import { colorPalettes } from '../lib/color-palettes'
export const SpinnerWithColors = () => {
return (
<Stack gap="2" align="flex-start">
{colorPalettes.map((colorPalette) => (
<Stack
align="center"
key={colorPalette}
direction="row"
gap="10"
px="4"
>
<Spinner
size="sm"
color="colorPalette.600"
colorPalette={colorPalette}
/>
<Spinner
size="md"
color="colorPalette.600"
colorPalette={colorPalette}
/>
<Spinner
size="lg"
color="colorPalette.600"
colorPalette={colorPalette}
/>
</Stack>
))}
</Stack>
)
}
Custom Color
Use the color prop to pass a custom color to the spinner.
'use client'
import { Spinner } from '@saas-ui/react'
export const SpinnerCustomColor = () => {
return <Spinner color="teal.500" size="lg" />
}
Track Color
Use the --spinner-track-color variable to change the color of the spinner's
track.
'use client'
import { Spinner } from '@saas-ui/react'
export const SpinnerWithTrackColor = () => (
<Spinner
color="red.500"
css={{ '--spinner-track-color': 'colors.gray.200' }}
/>
)
Custom Speed
Use the animationDuration prop to change the speed of the spinner.
'use client'
import { Spinner } from '@saas-ui/react'
export const SpinnerWithCustomSpeed = () => (
<Spinner color="blue.500" animationDuration="0.8s" />
)
Thickness
Use the borderWidth prop to change the thickness of the spinner.
'use client'
import { Spinner } from '@saas-ui/react'
export const SpinnerWithCustomThickness = () => (
<Spinner color="blue.500" borderWidth="4px" />
)
Label
Compose the spinner with a label to provide additional context.
Loading...
'use client'
import { Text, VStack } from '@chakra-ui/react'
import { Spinner } from '@saas-ui/react'
export const SpinnerWithLabel = () => {
return (
<VStack colorPalette="teal">
<Spinner color="colorPalette.600" />
<Text color="colorPalette.600">Loading...</Text>
</VStack>
)
}
Props
Root
| Prop | Default | Type |
|---|---|---|
colorPalette | 'gray' | 'gray' | 'zinc' | 'neutral' | 'stone' | 'red' | 'orange' | 'amber' | 'yellow' | 'lime' | 'green' | 'emerald' | 'teal' | 'cyan' | 'sky' | 'blue' | 'indigo' | 'violet' | 'purple' | 'fuchsia' | 'pink' | 'rose' | 'presence' | 'status' | 'sidebar' | 'sidebar.accent' | 'accent' | 'slate'The color palette of the component |
size | 'md' | 'inherit' | 'xs' | 'sm' | 'md' | 'lg' | 'xl'The size of the component |
loading | boolean |