Skip to content
Docs
Components
Feedback
CircularProgress

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";
💡

A complex component that supports customization as per the composition guide.

Usage

CircularProgress sizes

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

Min max values

Set the min and max values of the progress bar.

Indeterminate progress

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

CircularProgress Hint

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

Customizing CircularProgress

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

API Reference

Prop

Type

Default

sizeunionmd
hintReact.ReactNode-
Last updated on June 8, 2023