Skip to content
Edit this page

Circular Progress

Circular Progress indicators, commonly known as spinners, express an unspecified wait time or display the length of a process.

Introduction

Progress indicators inform users about the status of ongoing processes, such as loading an app, submitting a form, or saving updates.

The CircularProgress is indeterminate by default, indicating an unspecified wait time. To actually have it represent how long an operation will take, use the determinate mode.

The animations of the components rely on CSS as much as possible to work even before the JavaScript is loaded.

<CircularProgress />

Playground

Color

size

determinate

Component

After installation, you can start building with this component using the following basic elements:

import CircularProgress from '@mui/joy/CircularProgress';

export default function MyApp() {
  return <CircularProgress />;
}

Variants

The circular progress component supports the four global variants: solid, soft (default), outlined, and plain.

<CircularProgress variant="solid" />
<CircularProgress variant="soft" />
<CircularProgress variant="outlined" />
<CircularProgress variant="plain" />

Colors

Every palette included in the theme is available via the color prop. Play around combining different colors.

Variant:

Sizes

The circular progress component comes with three sizes out of the box: sm, md (default), and lg.

<CircularProgress size="sm" />
<CircularProgress size="md" />
<CircularProgress size="lg" />

Determinate

You can use the determinate prop if you want to indicate a specified wait time.

<CircularProgress determinate value={25} />
<CircularProgress determinate value={50} />
<CircularProgress determinate value={75} />
<CircularProgress determinate value={100} />
<CircularProgress determinate value={progress} />

Thickness

Provides a number to thickness prop to control the circle's stroke width.

Children

The circular progress component places the provided children in the center by default.

2 / 3
<CircularProgress color="warning">
  <WarningIcon color="warning" />
</CircularProgress>
<CircularProgress size="lg" determinate value={66.67}>
  2 / 3
</CircularProgress>
<CircularProgress color="danger" sx={{ '--CircularProgress-size': '80px' }}>
  <ReportIcon color="danger" />
</CircularProgress>

With a button

CircularProgress can be used as a decorator to show loading on a button.

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

<Button startIcon={<CircularProgress variant="solid" thickness={2} />}>
  Loading…
</Button>
<IconButton>
  <CircularProgress thickness={2} />
</IconButton>
{/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
<Link
  component="button"
  variant="outlined"
  startDecorator={<CircularProgress variant="plain" thickness={2} />}
  sx={{ p: 1 }}
>
  Submitting...
</Link>

CSS variables

Play around with all the CSS variables available on the component to see how the design changes.

You can use those to customize the component on both the sx prop and the theme.

<CircularProgress />

CSS Variables

px
px
px