How to implement circular progress indicator using Material UI
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
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
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:
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
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';
Next, we must add the CircularProgress component to our component function with the relevant props.
function App() {return (<div><CircularProgress {props...} /></div>);}
Although, we can still use the CircularProgress component without providing any 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 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
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>);}
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>);}
Working the CircularProgress example
Now that we’ve seen how to use the CircularProgress component, let’s now go over the 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>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
CircularProgresscomponent, 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
useTimerProgresshook we created. All you need to know about it is that it returns a progress number that increases by20points over a period2.5seconds and resets when the progress number reaches100points.Line 3: We import the
CircularProgresscomponent 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
CircularProgresscomponents.Line 11: We extract the progress value from the
useTimerProgresshook. This progress value will be used with the determinateCircularProgresscomponent to simulate how that component would work when progress is known.Lines 15–17: We create a button to show/hide the default indeterminate
CircularProgresscomponent. We’ve created similar buttons for both the colored and determinateCircularProgresscomponents we’ve used in this example.Line 18: We use the
indeterminateCircularstate variable’s boolean value to determine whether the default indeterminateCircularProgresscomponent is shown. We’ve used similar state variables for the otherCircularProgresscomponents.Line 20: We define the indeterminate
CircularProgresscomponent 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 theCircularProgresscomponent.Lines 30–36: We define several
CircularProgresscomponents in this code block. Notice the different default color schemes we’ve defined in thecolorprop of these components.Line 46: We define the determinate
CircularProgresscomponent using thevariantprop and provided the progress value we extracted from the customuseTimerProgresshook in itsvalueprop.Line 47: We display the progress value here alongside the determinate
CircularProgresscomponent to better visualize its effect.
To sum up, we’ve seen how to install and integrate the CircularProgress component within a React application.
