Progress Circle
Used to display a task's progress in a circular form.
AI TipWant to skip the docs? Use the MCP Server
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'The color palette of the component |
size | 'md' | 'xs' | 'sm' | 'md' | 'lg' | 'xl'The size of the component |
as | React.ElementTypeThe underlying element to render. | |
asChild | booleanUse the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide. | |
unstyled | booleanWhether to remove the component's style. |