How to implement circular progress indicator using Material UI

Key takeaways:

  • Progress indicators are essential for user engagement as they provide visual feedback during ongoing processes.

  • Circular progress indicators are compact and space-efficient, making them ideal for modern, clean UI designs.

  • The Material UI library includes customizable CircularProgress components specifically for React applications.

  • These components support props such as color, size, and variant to adapt to various requirements.

  • The indeterminate variant is useful for tasks with unknown durations, while the determinate variant works well for measurable progress.

Progress indicators are useful visual hints that help inform users of the status of any ongoing processes they’re waiting for in our applications. They are necessary design elements to keep users engaged and allow them to stay within the application while they wait.

Circular progress indicators are a type of progress indicator that takes the form of a circle. They’re quite compact and more space-efficient than their traditional linear progress bar counterparts, making them ideal for modern UI designs that favor clean, rounded elements.

Many libraries offer customizable prebuilt circular progress elements, including the Material UI library for React applications.

Material UI library in React

The Material UI library, or MUI, is a React componentA React component is a reusable, encapsulated piece of the user interface that can manage its own state and behavior in a React application. library for building user interfaces based on Google’s Material Design guidelines.

Note: To learn more about React components, follow the Educative Answer: What is a React component?

All design elements in Material UI are React components. Material UI provides a wide range of customizable, ready-to-use components, such as buttons, cards, dialogs, icons, and more.

The circular progress indicator can be found in Material UI as the CircularProgress component.

Installation of the Material UI library

To install the Material UI library, we simply need to execute the following command within the relevant React project directory:

npm install @mui/material @emotion/react @emotion/styled --legacy-peer-deps

The following terminal can help simulate installing the Material UI library. To do so, simply click the terminal to connect with it, and the terminal environment should open in a test-app directory that serves as a simulated React project where we can install the library.

After connecting to the terminal, execute the npm installation command for Material UI:

Terminal 1
Terminal
Loading...

Upon the successful installation of the Material UI library, we should see a message similar to this, along with some other text:

added 86 packages, and audited 87 packages in Xs
Sample success message

Using the CircularProgress component

To use the CircularProgress component, we first need to import it into the relevant React component file:

import CircularProgress from '@mui/material/CircularProgress';
Importing the CircularProgress component

Next, we must add the CircularProgress component to our component function with the relevant props.

function App() {
  return (
    <div>
        <CircularProgress {props...} />
    </div>
  );
}
The CircularProgress component nested in a root component

Although, we can still use the CircularProgress component without providing any props,A React prop is a custom attribute used to pass data and event handlers to components in a React application. it’s still recommended to use them as they allow us to customize the CircularProgress component according to our needs. Here are some of the important props we can use for the CircularProgress component:

Name

Type

Default Value

Description

color

String

'primary'

  • This prop defines the color of the circular progress indicator.

  • Accepted values: inherit, primary, secondary, error, info, success, warning

size

Number | String

40

  • This prop defines the size of the circular progress indicator.

  • The pixel units are assumed when we just provide a number to it.

  • We use other CSS units by providing a string instead, like this '40px'.

thickness

Number

3.6

  • This prop defines the thickness of the circular progress indicator.

value

Number

0

  • This prop defines the progress for the determinate circular progress indicator.

  • Acceptable number range: 0-100

variant

String

'indeterminate'

  • This prop specifies whether we want to use the indeterminate or determinate version of the circular progress indicator.

  • Accepted values: indeterminate, determinate 

Note: To learn more about React props, follow the Educative Answer: What are props in React?

Setting colors in CircularProgress

To change the colors of the CircularProgress component, we need to simply provide the default color scheme value we want to use in the color prop. For example, here’s how we can create a red circular progress component belonging to the 'error' scheme:

function App() {
  return (
    <div>
        <CircularProgress color='error' />
    </div>
  );
}
The CircularProgress component with the red 'error' color scheme

Indeterminate vs. determinate CircularProgress

We can now discuss the difference between the indeterminate vs. determinate CircularProgress components, and when to use them.

To put it simply, in the indeterminate CircularProgress component, we continuously animate the indicator to display that work is still ongoing without showing how much progress has actually been made in a task. This technique is useful when the duration of the task is unknown.

On the other hand, in the determinate CircularProgress component, we display a visual indicator that visually reflects the actual progress percentage of the task that has been completed. This technique is useful when the task progress can be measured.

Here’s an example of how we can create an indeterminate circular progress component using the variant prop:

function App() {
  return (
    <div>
        <CircularProgress variant='indeterminate' />
    </div>
  );
}
The CircularProgress component of the 'indeterminate' variant

Working with the CircularProgress example

Now that we’ve seen how to use the CircularProgress component, let’s now go over a working React application example with a few CircularProgress components integrated:

<!doctype html>
<html lang="en">

  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Circular Progress Example</title>
  </head>

  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.jsx"></script>
  </body>

</html>
CircularProgress integration working example

Code explanation

Let’s look at the code where we’ve embedded the CircularProgress component into the CircularProgressLayout component within our React application.

Note: For better understanding of the integration of the CircularProgress component, we’ve only gone over the relevant code related to it. We have skipped the explanation for code added for cosmetic purposes.

  • Line 2: We import the custom useTimerProgress hook we created. All you need to know about it is that it returns a progress number that increases by 20 points over a period 2.5 seconds and resets when the progress number reaches 100 points.

  • Line 3: We import the CircularProgress component from the Material UI library.

  • Lines 7–9: We create several state variables that we’ll use in conjunction with buttons to show and hide the corresponding CircularProgress components.

  • Line 11: We extract the progress value from the useTimerProgress hook. This progress value will be used with the determinate CircularProgress component to simulate how that component would work when progress is known.

  • Lines 15–17: We create a button to show/hide the default indeterminate CircularProgress component. We’ve created similar buttons for both the colored and determinate CircularProgress components we’ve used in this example.

  • Line 18: We use the indeterminateCircular state variable’s boolean value to determine whether the default indeterminate CircularProgress component is shown. We’ve used similar state variables for the other CircularProgress components.

  • Line 20: We define the indeterminate CircularProgress component in this line. Noticed that we’ve not provided any props, and the circular progress indicator is indeterminate because that’s the default variant setting for the CircularProgress component.

  • Lines 30–36: We define several CircularProgress components in this code block. Notice the different default color schemes we’ve defined in the color prop of these components.

  • Line 46: We define the determinate CircularProgress component using the variant prop and provided the progress value we extracted from the custom useTimerProgress hook in its value prop.

  • Line 47: We display the progress value here alongside the determinate CircularProgress component to better visualize its effect.

To sum up, we’ve seen how to install and integrate the CircularProgress component within a React application.

Explore the following projects for hands-on practice in creating real-world applications with React. You can enhance these projects by incorporating Material-UI for a polished and visually appealing design.

Frequently asked questions

Haven’t found what you were looking for? Contact Us

What is a Material UI Skeleton?

The Skeleton component acts as a visual placeholder while the content is loading on the screen. This helps improve user experience by reducing load time frustration, and ensuring responsiveness and activity while avoiding a blank white screen.

What is Kendo UI?

Kendo UI is a comprehensive library of UI components for building web applications. It supports a variety of frameworks, including React, Angular, Vue, and jQuery. It provides pre-built themes, extensive charting, grids, and accessibility support. Kendo UI is widely used for its robust components and ability to accelerate development.

What does the Material UI Date Range Picker do?

The Material UI Date Range Picker allows users to select a range of dates using a calendar interface. It is built on top of the DatePicker component.

How does the onChange event work in the Material UI Autocomplete component?

The onChange event in the Material UI Autocomplete component is triggered whenever the user selects an option or clears the selection. It is a prop that accepts a callback function to handle these interactions, allowing you to update your application state or perform other actions based on the user’s choice.

Free Resources

Copyright ©2026 Educative, Inc. All rights reserved