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

CircularProgress

The CircularProgress component is used to indicate the progress for determinate and indeterminate processes. It uses AdaptUI Core's Progress component internally.

Imports

import {
  CircularProgress,
  CircularProgressBar,
  CircularProgressBarWrapper,
  CircularProgressHint,
  CircularProgressTrack,
} 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

import { CircularProgress } from "@adaptui/react-tailwind";

export const App = props => {
  return (
    <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.

import { CircularProgress } from "@adaptui/react-tailwind";

export const App = props => {
  return <CircularProgress min={10} max={40} value={35} />;
};

Indeterminate progress

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

import { CircularProgress } from "@adaptui/react-tailwind";

export const App = props => {
  return <CircularProgress value={null} />;
};

CircularProgress Hint

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

import { CircularProgress } from "@adaptui/react-tailwind";

export const App = props => {
  return <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.

import { CircularProgress } from "@adaptui/react-tailwind";

export const App = props => {
  return (
    <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", }, ]} />