Progress

Progress is used to display the progress status for a task that takes a long time or consists of several steps.

Imports#

import {
  Progress,
  ProgressBar,
  ProgressHint,
  ProgressLabel,
  useProgressProps,
  useProgressState,
  ProgressTrack,
  ProgressWrapper,
} from "@renderlesskit/react-tailwind";

Usage#

<Progress value={40}  />

Progress sizes#

Sizes can be set using the size prop. The default size is md. The available sizes are: sm md lg xl

<div className="flex flex-col space-y-2">
  <Progress size="sm" value={20} />
  <Progress size="md" value={30} />
  <Progress size="lg" value={40} />
  <Progress size="xl" value={50} />
</div>

Min max values#

Set the min and max values of the progress bar.

<Progress min={10} max={40} value={35} />

Indeterminate progress#

By setting the value prop to null, progress state becomes indeterminate

<Progress value={null} />

Progress Label#

Progress also comes with A11y label that can also be used to describe the progress status

<Progress value={50} label="Loading..."/>

Progress Hint#

Progress comes with A11y hint that can be used with label to indicate the progress status.

<Progress value={50} label="Loading..." hint={50}/>

Customizing Progress#

To customize the appearance of the Progress component we can simply pass down children components (ProgressTrack, ProgressBar) for more control.

<Progress value={40}>
  <ProgressTrack className="bg-red-300" />
  <ProgressBar className="bg-red-800" />
</Progress>

API Reference#