Progress

A data display component that maps numerical completeness percentages across a tracking bar.
For more information on this component configuration, visit Radix UI

Sizes

Use the progress-{size} class to control the component size.

Size values can include:smmdlg.

For more information on all available sizing utilities, visit Tailwind

Palette

Use the palette-{color} class to control the component color. Refer to the Colors documentation to see all available color and shade options.

For more information on all available color utilities, visit Tailwind .

Customizing

globals.css


:root {
  --ex-progress-size-sm: calc(var(--spacing) * 0.5);
  --ex-progress-size-md: calc(var(--spacing) * 1);
  --ex-progress-size-lg: calc(var(--spacing) * 1.5);
  --ex-progress-size-xl: calc(var(--spacing) * 2);
 
  --ex-progress-radius-sm: 9999px;
  --ex-progress-radius-md: 9999px;
  --ex-progress-radius-lg: 9999px;
  --ex-progress-radius-xl: 9999px;
}

API

For more information on this component configuration, visit Radix UI

Progress

Element	Selector
`Progress`	`.ex-progress`

Prop	Type	Default
`as`	`ElementType`	`div`
`asChild`	`boolean`	`false`
`max`	`number`
`value`	`number\|null`

Progress Indicator

Element	Selector
`Progress.Indicator`	`.ex-progress-indicator`

Prop	Type	Default
`as`	`ElementType`	`div`
`asChild`	`boolean`	`false`