CircularProgress

The CircularProgress component is used to indicate the progress for determinate and indeterminate processes.

Imports#

import {
  CircularProgress,
  CircularProgressBar,
  CircularProgressBarWrapper,
  CircularProgressHint,
  useCircularProgressProps,
  useCircularProgressState,
  CircularProgressTrack,
  CircularProgressTrackWrapper,
} from "@adaptui/react-tailwind";

Usage#

<CircularProgress value={40}  />

CircularProgress 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 items-center space-x-2">
  <CircularProgress size="sm" value={20} />
  <CircularProgress size="md" value={30} />
  <CircularProgress size="lg" value={40} />
  <CircularProgress size="xl" value={50} />
</div>

Min max values#

Set the min and max values of the progress bar.

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

Indeterminate progress#

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

<CircularProgress value={null} />

CircularProgress Hint#

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

<CircularProgress value={50} hint={50}/>

Customizing CircularProgress#

To customize the appearance of the CircularProgress component we can simply pass down children components (CircularProgressTrack, CircularProgressBar, CircularProgressHint) for more control.

<CircularProgress value={40}>
  <CircularProgressTrack className="text-red-300" />
  <CircularProgressBar className="text-red-700" />
  <CircularProgressHint className="text-red-900" />
</CircularProgress>

API Reference#