Source: https://www.radix-ui.com/themes/docs/components/progress

Radix Homepage

Made by WorkOS

Radix Homepage

Made by WorkOS

ThemesThemes PrimitivesPrimitives IconsIcons ColorsColors

Documentation Playground Blog

Overview

Getting started Styling Layout Releases Resources

Theme

Overview Color Dark mode Typography Spacing Breakpoints Radius Shadows Cursors

Layout

Box Flex Grid Container Section

Typography

Text Heading Blockquote Code Em Kbd Link Quote Strong

Components

Alert Dialog Aspect Ratio Avatar Badge Button Callout Card Checkbox Checkbox Group Checkbox Cards Context Menu Data List Dialog Dropdown Menu Hover Card Icon Button Inset Popover Progress Radio Radio Group Radio Cards Scroll Area Segmented Control Select Separator Skeleton Slider Spinner Switch Table Tabs Tab Nav Text Area Text Field Tooltip

Utilities

Accessible Icon Portal Reset Slot Theme Visually Hidden

Components

Progress

Displays a progress bar related to a task.

View source Report an issue View in Playground

<Box maxWidth="300px">
	<Progress />
</Box>

API Reference

---

This component inherits props from the Progress primitive and supports common margin props .

| Prop | Type | Default | | --- | --- | --- | | size | Responsive<"1" \| "2" \| "3"> | "2" | | variant<br><br>Prop description | "classic" \| "surface" \| "soft" | "surface" | | color<br><br>Prop description | enum<br><br>See full type | No default value | | highContrast<br><br>Prop description | boolean | No default value | | radius<br><br>Prop description | "none" \| "small" \| "medium" \| "large" \| "full" | No default value | | duration | string | No default value |

Examples

---

Size

Use the size prop to control the size.

<Flex direction="column" gap="4" maxWidth="300px">
	<Progress value={25} size="1" />
	<Progress value={50} size="2" />
	<Progress value={75} size="3" />
</Flex>

Variant

Use the variant prop to control the visual style.

<Flex direction="column" gap="4" maxWidth="300px">
	<Progress value={25} variant="classic" />
	<Progress value={50} variant="surface" />
	<Progress value={75} variant="soft" />
</Flex>

Color

Use the color prop to assign a specific color .

<Flex direction="column" gap="4" maxWidth="300px">
	<Progress value={20} color="indigo" />
	<Progress value={40} color="cyan" />
	<Progress value={60} color="orange" />
	<Progress value={80} color="crimson" />
</Flex>

High-contrast

Use the highContrast prop to increase color contrast with the background.

<Grid columns="2" gap="4">
	<Progress value={10} color="indigo" />
	<Progress value={10} color="indigo" highContrast />
	<Progress value={30} color="cyan" />
	<Progress value={30} color="cyan" highContrast />
	<Progress value={50} color="orange" />
	<Progress value={50} color="orange" highContrast />
	<Progress value={70} color="crimson" />
	<Progress value={70} color="crimson" highContrast />
	<Progress value={90} color="gray" />
	<Progress value={90} color="gray" highContrast />
</Grid>

Radius

Use the radius prop to assign a specific radius value.

<Flex direction="column" gap="4" maxWidth="300px">
	<Progress value={25} radius="none" />
	<Progress value={50} radius="small" />
	<Progress value={75} radius="full" />
</Flex>

With controlled value

Use the value prop to provide a precise indication of the task progress.

<Progress value={75} />

With custom duration

Use the duration prop to indicate an approximate duration of an indeterminate task. Once the duration times out, the progress bar will start an indeterminate animation.

<Progress duration="30s" />

When an approximate duration can be estimated, the Progress component is still useful over Spinner , which doesn’t provide any visual cues towards the progress of the task.

PreviousPopover

NextRadio

Edit this page on GitHub.