import {
ProgressCircleRing,
ProgressCircleRoot,
} from "@/components/ui/progress-circle"
const Demo = () => {
return (
<ProgressCircleRoot value={75}>
<ProgressCircleRing />
</ProgressCircleRoot>
)
}
Setup
If you don't already have the snippet, run the following command to add the
progress-circle snippet
npx @chakra-ui/cli snippet add progress-circleThe snippet includes a closed component composition for the ProgressCircle
component.
Usage
import {
ProgressCircleRing,
ProgressCircleRoot,
} from "@/components/ui/progress-circle"<ProgressCircleRoot>
<ProgressCircleRing />
<ProgressCircleValueText />
</ProgressCircleRoot>Examples
Sizes
Use the size prop to change the size of the progress circle component.
import { For, HStack } from "@chakra-ui/react"
import {
ProgressCircleRing,
ProgressCircleRoot,
} from "@/components/ui/progress-circle"
const Demo = () => {
return (
<HStack gap="10">
<For each={["xs", "sm", "md", "lg", "xl"]}>
{(size) => (
<ProgressCircleRoot size={size} value={30}>
<ProgressCircleRing cap="round" />
</ProgressCircleRoot>
)}
</For>
</HStack>
)
}
Colors
Use the colorPalette prop to change the color scheme of the component.
gray
red
green
blue
teal
pink
purple
cyan
orange
yellow
import { HStack, Stack, Text } from "@chakra-ui/react"
import { colorPalettes } from "compositions/lib/color-palettes"
import {
ProgressCircleRing,
ProgressCircleRoot,
} from "@/components/ui/progress-circle"
const Demo = () => {
return (
<Stack gap="4" align="flex-start">
{colorPalettes.map((colorPalette) => (
<HStack key={colorPalette} gap="10" px="4">
<Text minW="8ch">{colorPalette}</Text>
<ProgressCircleRoot size="sm" value={30} colorPalette={colorPalette}>
<ProgressCircleRing cap="round" />
</ProgressCircleRoot>
<ProgressCircleRoot size="md" value={30} colorPalette={colorPalette}>
<ProgressCircleRing cap="round" />
</ProgressCircleRoot>
<ProgressCircleRoot size="lg" value={30} colorPalette={colorPalette}>
<ProgressCircleRing cap="round" />
</ProgressCircleRoot>
</HStack>
))}
</Stack>
)
}
Value Text
Render the ProgressCircleValueText component to display the progress value.
5%
5%
5%
import { For, HStack } from "@chakra-ui/react"
import {
ProgressCircleRing,
ProgressCircleRoot,
ProgressCircleValueText,
} from "@/components/ui/progress-circle"
const Demo = () => {
return (
<HStack gap="8">
<For each={["md", "lg", "xl"]}>
{(size) => (
<ProgressCircleRoot value={5} size={size}>
<ProgressCircleValueText />
<ProgressCircleRing />
</ProgressCircleRoot>
)}
</For>
</HStack>
)
}
Custom Thickness
Pass the --thickness css variable to the ProgressCircleRing component to
change the thickness of the ring.
import {
ProgressCircleRing,
ProgressCircleRoot,
} from "@/components/ui/progress-circle"
const Demo = () => {
return (
<ProgressCircleRoot value={75}>
<ProgressCircleRing css={{ "--thickness": "2px" }} />
</ProgressCircleRoot>
)
}
Indeterminate
Set the value prop to null to render the indeterminate state.
import {
ProgressCircleRing,
ProgressCircleRoot,
} from "@/components/ui/progress-circle"
const Demo = () => {
return (
<ProgressCircleRoot value={null} size="sm">
<ProgressCircleRing cap="round" />
</ProgressCircleRoot>
)
}
Props
Root
| Prop | Default | Type |
|---|---|---|
colorPalette | 'gray' | 'gray' | 'red' | 'orange' | 'yellow' | 'green' | 'teal' | 'blue' | 'cyan' | 'purple' | 'pink' | 'accent'The color palette of the component |
size | 'md' | 'xs' | 'sm' | 'md' | 'lg'The size of the component |