Skip to main content

Circular Progress

The Circular Progress component showcases the duration of a process or an indefinite wait period.

Basics​

import { CircularProgress } from 'tailwind-joy/components';

The Circular Progress component provides users with updates on the status of ongoing processes such as loading an app, submitting a form, or saving updates.

Customization​

Variants​

The Circular Progress component supports four variants: solid, soft (default), outlined, and plain.

import { Box, CircularProgress } from 'tailwind-joy/components';

export function CircularProgressVariants() {
  return (
    <Box className="flex flex-wrap items-center justify-center gap-4">
      <CircularProgress variant="solid" />
      <CircularProgress variant="soft" />
      <CircularProgress variant="outlined" />
      <CircularProgress variant="plain" />
    </Box>
  );
}

Sizes​

The Circular Progress component supports three sizes: sm, md (default), and lg.

import { Box, CircularProgress } from 'tailwind-joy/components';

export function CircularProgressSizes() {
  return (
    <Box className="flex flex-wrap items-center justify-center gap-4">
      <CircularProgress size="sm" />
      <CircularProgress size="md" />
      <CircularProgress size="lg" />
    </Box>
  );
}

Colors​

The Circular Progress component supports five colors: primary (default), neutral, danger, success, and warning.

import { Box, CircularProgress } from 'tailwind-joy/components';

export function CircularProgressColors() {
  return (
    <Box className="flex flex-wrap items-center justify-center gap-4">
      <CircularProgress color="primary" />
      <CircularProgress color="neutral" />
      <CircularProgress color="danger" />
      <CircularProgress color="success" />
      <CircularProgress color="warning" />
    </Box>
  );
}

Thickness​

You can use the thickness prop to control the circle's stroke width.

import { CircularProgress } from 'tailwind-joy/components';

export function CircularProgressThickness() {
  return <CircularProgress thickness={1} />;
}

Determinate​

The determinate prop lets you indicate a specified wait time.

import { Box, CircularProgress } from 'tailwind-joy/components';

export function CircularProgressDeterminate() {
  return (
    <Box className="flex flex-wrap items-center justify-center gap-4">
      <CircularProgress determinate value={25} />
      <CircularProgress determinate value={50} />
      <CircularProgress determinate value={75} />
      <CircularProgress determinate value={100} />
    </Box>
  );
}

Children​

By default, any children nested inside the Circular Progress will be centered.

2 / 3
import { MdReport, MdWarning } from 'react-icons/md';
import { Box, CircularProgress } from 'tailwind-joy/components';
import { iconClass } from 'tailwind-joy/utils';

export function CircularProgressChildren() {
  return (
    <Box className="flex flex-wrap items-center justify-center gap-4">
      <CircularProgress color="warning">
        <MdWarning className={iconClass({ color: 'warning' })} />
      </CircularProgress>
      <CircularProgress size="lg" determinate value={66.67}>
        2 / 3
      </CircularProgress>
      <CircularProgress
        color="danger"
        className="[--CircularProgress-size:80px]"
      >
        <MdReport className={iconClass({ color: 'danger' })} />
      </CircularProgress>
    </Box>
  );
}
info

For plain texts and icons, the dimension is relative to the circular progress's CSS variable (--CircularProgress-size).

info

iconClass() is an adapter function provided by Tailwind-Joy.

With a button​

The Circular Progress component can be used as a decorator to show loading on a button.

The size of the Circular Progress is controlled by a button, or an icon button unless the size prop is explicitly specified on the progress.

import {
  Box,
  Button,
  CircularProgress,
  IconButton,
} from 'tailwind-joy/components';

export function CircularProgressWithButton() {
  return (
    <Box className="flex flex-wrap items-center justify-center gap-4">
      <Button startDecorator={<CircularProgress variant="solid" />}>
        Loading...
      </Button>
      <IconButton>
        <CircularProgress />
      </IconButton>
    </Box>
  );
}

Anatomy​

The Circular Progress component is composed of a single root <span> with an <svg> component that wraps around two <circle>.

<span role="progressbar" class="tj-circular-progress-root ...">
  <svg class="...">
    <circle class="..."></circle>
    <circle class="..."></circle>
  </svg>
  <!-- children are nested here when present -->
</span>

API​

See the documentation below for a complete reference to all of the props available to the components mentioned here.