Progress
Used to display the progress status for a task.
import { Progress } from "@chakra-ui/react" const Demo = () => { return ( <Progress.Root maxW="240px"> <Progress.Track> <Progress.Range /> </Progress.Track> </Progress.Root> ) } Usage
import { Progress } from "@chakra-ui/react"<Progress.Root> <Progress.Track> <Progress.Range /> </Progress.Track> <Progress.Label /> <Progress.ValueText /> </Progress.Root>Examples
Sizes
Use the size prop to change the size of the progress bar.
import { For, Progress, Stack } from "@chakra-ui/react" const Demo = () => { return ( <Stack gap="4" maxW="240px"> <For each={["xs", "sm", "md", "lg"]}> {(size) => ( <Progress.Root key={size} size={size}> <Progress.Track> <Progress.Range /> </Progress.Track> </Progress.Root> )} </For> </Stack> ) } Variants
Use the variant prop to change the visual style of the progress bar.
import { Progress, Stack } from "@chakra-ui/react" const Demo = () => { return ( <Stack gap="4" maxW="240px"> <Progress.Root variant="subtle"> <Progress.Track> <Progress.Range /> </Progress.Track> </Progress.Root> <Progress.Root variant="outline"> <Progress.Track> <Progress.Range /> </Progress.Track> </Progress.Root> </Stack> ) } Colors
Use the colorPalette prop to change the color of the progress bar.
gray
red
green
blue
teal
pink
purple
cyan
orange
yellow
import { Progress, Stack, Text } from "@chakra-ui/react" import { colorPalettes } from "compositions/lib/color-palettes" const Demo = () => { return ( <Stack gap="2" align="flex-start"> {colorPalettes.map((colorPalette) => ( <Stack align="center" key={colorPalette} direction="row" gap="10" px="4" > <Text minW="8ch">{colorPalette}</Text> <Progress.Root width="120px" defaultValue={40} colorPalette={colorPalette} variant="outline" > <Progress.Track> <Progress.Range /> </Progress.Track> </Progress.Root> <Progress.Root width="120px" defaultValue={40} colorPalette={colorPalette} variant="subtle" > <Progress.Track> <Progress.Range /> </Progress.Track> </Progress.Root> </Stack> ))} </Stack> ) } Inline Label
Compose the Progress.Label and Progress.ValueText components to create an inline label for the progress bar.
import { HStack, Progress } from "@chakra-ui/react" const Demo = () => { return ( <Progress.Root defaultValue={40} maxW="sm"> <HStack gap="5"> <Progress.Label>Usage</Progress.Label> <Progress.Track flex="1"> <Progress.Range /> </Progress.Track> <Progress.ValueText>40%</Progress.ValueText> </HStack> </Progress.Root> ) } Info tip
Use the info prop to add a tooltip to the progress bar.
import { Progress } from "@chakra-ui/react" import { InfoTip } from "@/components/ui/toggle-tip" const Demo = () => { return ( <Progress.Root maxW="240px"> <Progress.Label mb="2"> Uploading <InfoTip>Uploading document to the server</InfoTip> </Progress.Label> <Progress.Track> <Progress.Range /> </Progress.Track> </Progress.Root> ) } Indeterminate
Set the value to null to show an indeterminate progress bar.
import { Progress } from "@chakra-ui/react" const Demo = () => { return ( <Progress.Root maxW="240px" value={null}> <Progress.Track> <Progress.Range /> </Progress.Track> </Progress.Root> ) } Stripes
Set the striped prop to true to add stripes to the progress bar.
import { Progress } from "@chakra-ui/react" const Demo = () => { return ( <Progress.Root maxW="240px" striped> <Progress.Track> <Progress.Range /> </Progress.Track> </Progress.Root> ) } Animated Stripes
Set the animated prop to true to animate the stripes.
import { Progress } from "@chakra-ui/react" const Demo = () => { return ( <Progress.Root maxW="240px" striped animated> <Progress.Track> <Progress.Range /> </Progress.Track> </Progress.Root> ) } Closed Component
Here's how to create a closed component using the Progress component.
import { Progress as ChakraProgress } from "@chakra-ui/react" import { InfoTip } from "@/components/ui/toggle-tip" import * as React from "react" interface ProgressProps extends ChakraProgress.RootProps { showValueText?: boolean valueText?: React.ReactNode label?: React.ReactNode info?: React.ReactNode } export const Progress = React.forwardRef<HTMLDivElement, ProgressProps>( function Progress(props, ref) { const { showValueText, valueText, label, info, ...rest } = props return ( <ChakraProgress.Root {...rest} ref={ref}> {label && ( <ChakraProgress.Label> {label} {info && <InfoTip>{info}</InfoTip>} </ChakraProgress.Label> )} <ChakraProgress.Track> <ChakraProgress.Range /> </ChakraProgress.Track> {showValueText && ( <ChakraProgress.ValueText>{valueText}</ChakraProgress.ValueText> )} </ChakraProgress.Root> ) }, ) Props
Root
| Prop | Default | Type |
|---|---|---|
defaultValue | '50' | numberThe initial value of the progress bar when rendered. Use when you don't need to control the value of the progress bar. |
formatOptions | '{ style: \'percent\' }' | NumberFormatOptionsThe options to use for formatting the value. |
locale | '\'en-US\'' | stringThe locale to use for formatting the value. |
max | '100' | numberThe maximum allowed value of the progress bar. |
min | '0' | numberThe minimum allowed value of the progress bar. |
orientation | '\'horizontal\'' | 'horizontal' | 'vertical'The orientation of the element. |
colorPalette | 'gray' | 'gray' | 'red' | 'orange' | 'yellow' | 'green' | 'teal' | 'blue' | 'cyan' | 'purple' | 'pink'The color palette of the component |
variant | 'outline' | 'outline' | 'subtle'The variant of the component |
shape | 'rounded' | 'square' | 'rounded' | 'full'The shape 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. | |
id | stringThe unique identifier of the machine. | |
ids | Partial<{ root: string; track: string; label: string; circle: string }>The ids of the elements in the progress bar. Useful for composition. | |
onValueChange | (details: ValueChangeDetails) => voidCallback fired when the value changes. | |
translations | IntlTranslationsThe localized messages to use. | |
value | numberThe controlled value of the progress bar. | |
striped | 'true' | 'false'The striped of the component | |
animated | 'true' | 'false'The animated of the component |
Explorer
Explore the Progress component parts interactively. Click on parts in the sidebar to highlight them in the preview.
Component Anatomy
Hover to highlight, click to select parts
root
label
track
range
valueText
view
circle
circleTrack
circleRange
progress.recipe.ts