React MUI Progress Feedback

React MUI is a UI library that provides fully-loaded components, bringing our own design system to our production-ready components. MUI is a user interface library that provides predefined and customizable React components for faster and easy web development, these MUI components are based on top of Material Design by Google.

In this article, we’ll be discussing React MUI Progress Feedback. The Progress component is used to display indicators such as spinners that express an unspecified wait time or display the length of a process.

Progress Variants:

• Circular progress: In this variant, the progress feedback is in circular form. It consists of Circular indeterminant, Circular color, Circular determinate, Interactive integration, Circular with the label.
• Linear progress: In this variant, the progress feedback is in linear form. It consists of Circular indeterminant, Circular color, Circular determinate, linear buffer, Circular with the label.

Non-standard ranges: The progress feedback accepts only 0-100 range values but if we want to add a custom value outside the range we can specify that also.

Customization: The progress feedback component can be customized with custom styles. This includes changing the size, thickness, position and animation values.

Limitations: There are limitations like incorrect animation seen when heavy CPU load, high-frequency updates, etc are performed.

API: The <CircularProgress />, and <LinearProgress /> are used in the progress feedback component.

Syntax:

<CircularProgress />
<LinearProgress />

Creating React Project:

Step 1: To create a react app, install react modules through npm command.

npm create-react-app project name

Step 2: After creating your react project, move into the folder to perform different operations.

cd project name

Step 3: After creating the ReactJS application, Install the required module using the following command:

npm install @mui/material @emotion/react @emotion/styled

Project Structure:

Step to Run Application: Open the terminal and type the following command.

npm start

Example 1: Below example demonstrates the React MUI circular progress feedback.

Javascript

import { CircularProgress } from "@mui/material";
import * as React from "react";
import { useState } from "react";
import { useEffect } from "react";

function App() {
    const [progressValue, setProgressValue] = useState(0);

    useEffect(() => {
        const time = setInterval(() => {
            setProgressValue((beforeProgress) =>
                (beforeProgress >= 100 ? 0 : beforeProgress + 15));
        }, 800);

        return () => {
            clearInterval(time);
        };
    }, []);

    return (
        <center>
            <div>
                <h1 style={{ color: "green" }}>
                    GeeksforGeeks
                </h1>
                <h2>React MUI Progress Feedback</h2>
            </div>
            <div>
                <CircularProgress
                    color="success"
                    variant="indeterminate"
                />
                <CircularProgress
                    variant="determinate"
                    color="primary"
                    value={progressValue}
                />
            </div>
        </center>
    );
}

export default App;

Output:

React MUI Progress Feedback

Example 2: Below example demonstrates the React MUI Linear progress feedback.

Javascript

import { LinearProgress } from "@mui/material";
import * as React from "react";
import { useState } from "react";
import { useEffect } from "react";

function App() {
    const [progressValue, setProgressValue] = useState(10);

    useEffect(() => {
        const time = setInterval(() => {
            setProgressValue((beforeProgress) =>
                (beforeProgress >= 100 ? 0 : beforeProgress + 15));
        }, 500);

        return () => {
            clearInterval(time);
        };
    }, []);

    return (
        <center>
            <div>
                <h1 style={{ color: "green" }}>
                    GeeksforGeeks
                </h1>
                <h2>React MUI Progress Feedback</h2>
            </div>
            <div>
                <LinearProgress
                    variant="determinate"
                    color="error"
                    value={progressValue}
                />
            </div>
        </center>
    );
}

export default App;

Output:

React MUI Progress Feedback

Reference: https://mui.com/material-ui/react-progress/