The Progress component visually represents the completion status of a task or process, such as uploading a file, loading content, or completing form steps.


import Progress from "@radui/ui/Progress";

const ProgressExample = () => (
  <div style={{ width: "90%" }}>
    <Progress value={90}  />
  </div>
)
  • Displays completion status visually as a horizontal bar
  • Supports minimum and maximum value configuration
  • Customizable color themes
  • Smooth animations for value changes
  • Option to add custom labels with renderLabel prop
  • Follows accessibility best practices with proper ARIA attributes

A component that displays the completion status of a task or process, such as uploading a file, loading content, or completing form steps.

PropTypeDefault

value

number0

minValue

number0

maxValue

number100

color

string''

customRootClass

string''

renderLabel

function--
Edit this page on GitHub