import { ProgressCircle } from "@chakra-ui/react"
const Demo = () => {
return (
<ProgressCircle.Root value={75}>
<ProgressCircle.Circle>
<ProgressCircle.Track />
<ProgressCircle.Range />
</ProgressCircle.Circle>
</ProgressCircle.Root>
)
}
Usage
import { ProgressCircle } from "@chakra-ui/react"<ProgressCircle.Root>
<ProgressCircle.Circle>
<ProgressCircle.Track />
<ProgressCircle.Range />
</ProgressCircle.Circle>
<ProgressCircle.ValueText />
</ProgressCircle.Root>Examples
Rounded
Use the strokeLinecap prop on ProgressCircle.Range to make the ends of the
progress circle rounded.
import { ProgressCircle } from "@chakra-ui/react"
const Demo = () => {
return (
<ProgressCircle.Root value={75}>
<ProgressCircle.Circle>
<ProgressCircle.Track />
<ProgressCircle.Range strokeLinecap="round" />
</ProgressCircle.Circle>
</ProgressCircle.Root>
)
}
Sizes
Use the size prop to change the size of the progress circle component.
import { For, HStack, ProgressCircle } from "@chakra-ui/react"
const Demo = () => {
return (
<HStack gap="10">
<For each={["xs", "sm", "md", "lg", "xl"]}>
{(size) => (
<ProgressCircle.Root key={size} size={size} value={30}>
<ProgressCircle.Circle>
<ProgressCircle.Track />
<ProgressCircle.Range strokeLinecap="round" />
</ProgressCircle.Circle>
</ProgressCircle.Root>
)}
</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, ProgressCircle, Stack, Text } from "@chakra-ui/react"
import { colorPalettes } from "compositions/lib/color-palettes"
const Demo = () => {
return (
<Stack gap="4" align="flex-start">
{colorPalettes.map((colorPalette) => (
<HStack key={colorPalette} gap="10" px="4">
<Text minW="8ch">{colorPalette}</Text>
<ProgressCircle.Root size="sm" value={30} colorPalette={colorPalette}>
<ProgressCircle.Circle>
<ProgressCircle.Track />
<ProgressCircle.Range strokeLinecap="round" />
</ProgressCircle.Circle>
</ProgressCircle.Root>
<ProgressCircle.Root size="md" value={30} colorPalette={colorPalette}>
<ProgressCircle.Circle>
<ProgressCircle.Track />
<ProgressCircle.Range strokeLinecap="round" />
</ProgressCircle.Circle>
</ProgressCircle.Root>
<ProgressCircle.Root size="lg" value={30} colorPalette={colorPalette}>
<ProgressCircle.Circle>
<ProgressCircle.Track />
<ProgressCircle.Range strokeLinecap="round" />
</ProgressCircle.Circle>
</ProgressCircle.Root>
</HStack>
))}
</Stack>
)
}
Value Text
Render the ProgressCircle.ValueText component to display the progress value.
5%
5%
5%
import { AbsoluteCenter, For, HStack, ProgressCircle } from "@chakra-ui/react"
const Demo = () => {
return (
<HStack gap="8">
<For each={["md", "lg", "xl"]}>
{(size) => (
<ProgressCircle.Root size={size} key={size} value={5}>
<ProgressCircle.Circle>
<ProgressCircle.Track />
<ProgressCircle.Range />
</ProgressCircle.Circle>
<AbsoluteCenter>
<ProgressCircle.ValueText />
</AbsoluteCenter>
</ProgressCircle.Root>
)}
</For>
</HStack>
)
}
Custom Thickness
Pass the --thickness css variable to the ProgressCircleRing component to
change the thickness of the ring.
import { ProgressCircle } from "@chakra-ui/react"
const Demo = () => {
return (
<ProgressCircle.Root value={75}>
<ProgressCircle.Circle css={{ "--thickness": "2px" }}>
<ProgressCircle.Track />
<ProgressCircle.Range />
</ProgressCircle.Circle>
</ProgressCircle.Root>
)
}
Indeterminate
Set the value prop to null to render the indeterminate state.
import { ProgressCircle } from "@chakra-ui/react"
const Demo = () => {
return (
<ProgressCircle.Root value={null} size="sm">
<ProgressCircle.Circle>
<ProgressCircle.Track />
<ProgressCircle.Range />
</ProgressCircle.Circle>
</ProgressCircle.Root>
)
}
Color
Pass the stroke prop to the ProgressCircle.Range component to change the
color of the range.
import { ProgressCircle } from "@chakra-ui/react"
const Demo = () => {
return (
<ProgressCircle.Root value={75}>
<ProgressCircle.Circle>
<ProgressCircle.Track />
<ProgressCircle.Range stroke="orange" />
</ProgressCircle.Circle>
</ProgressCircle.Root>
)
}
Closed Component
Here's how to create a closed component using the ProgressCircle component.
import type { SystemStyleObject } from "@chakra-ui/react"
import {
AbsoluteCenter,
ProgressCircle as ChakraProgressCircle,
} from "@chakra-ui/react"
import * as React from "react"
interface ProgressCircleProps extends ChakraProgressCircle.RootProps {
showValueText?: boolean
valueText?: React.ReactNode
trackColor?: SystemStyleObject["stroke"]
cap?: SystemStyleObject["strokeLinecap"]
thickness?: SystemStyleObject["strokeWidth"]
}
export const ProgressCircle = React.forwardRef<
HTMLDivElement,
ProgressCircleProps
>(function ProgressCircle(props, ref) {
const {
showValueText,
valueText,
trackColor,
color,
cap,
thickness,
...rest
} = props
return (
<ChakraProgressCircle.Root {...rest} ref={ref}>
<ChakraProgressCircle.Circle css={{ "--thickness": thickness }}>
<ChakraProgressCircle.Track stroke={trackColor} />
<ChakraProgressCircle.Range stroke={color} strokeLinecap={cap} />
</ChakraProgressCircle.Circle>
{showValueText && (
<AbsoluteCenter>
<ChakraProgressCircle.ValueText>
{valueText}
</ChakraProgressCircle.ValueText>
</AbsoluteCenter>
)}
</ChakraProgressCircle.Root>
)
})
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 |