circular-progress.mdx

import { ComponentLinks, InteractiveCodeblock, PropsTable, Codeblock, } from "@/components/index";

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

<Nextra.Callout> A complex component that supports customization as per the composition guide. </Nextra.Callout>

Usage

<InteractiveCodeblock children={({ spreadProps }) => <CircularProgress value={40} ${spreadProps} /> } themeProps={{ size: "circularProgress.size" }} />

CircularProgress sizes

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

<Codeblock live code={`

`} />

Min max values

Set the min and max values of the progress bar.

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

Indeterminate progress

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

<Codeblock live code={<CircularProgress value={null} />} />

CircularProgress Hint

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

<Codeblock live code={<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.

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

API Reference

<PropsTable data={[ { name: "size", themeKey: "circularProgress.size", default: "md", }, { name: "hint", type: "React.ReactNode", description: "Hint component to display info center of the progressbar", }, ]} />