CircularProgress

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

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

💡

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

Usage

<CircularProgress value={40}  />

<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

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>
  );
};

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} />;
};

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} />;
};

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} />;
};

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>
  );
};

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

Prop	Type	Default
`size`	`union`	`md`
`hint`	`React.ReactNode`	-

Last updated on July 27, 2022