React MUI LinearProgress API

Material-UI is a UI library providing predefined robust and customizable components for React for easier web development. The MUI design is based on top of Material Design by Google.

n this article, we will discuss the React MUI LinearProgress API. Progress indicators are used to display the amount of work done with respect to the total task or just show the loading indicator. The API provides a lot of functionality and we will learn to implement them.

Props List: Here is the list of props used with this component. We can access them and modify them according to our needs.

• classes(object): This overrides the existing styles or adds new styles to the component.
• color(inherit/primary/secondary/string): It is used to set the color of the component. The default value is primary. 
• sx( Array<func / object / bool>/ func / object): The system prop allows defining system overrides as well as additional CSS styles. 
• value(number): It is used to set the value of the linear progress indicator for the determinate and buffer variants. The value ranges between 0 and 100.
• valueBuffer(number): It is used to set the value of the value buffer for the progress indicator. The value ranges between 0 and 100.
• variant(determinate/indeterminate/buffer/query): It is used to set the variant. The default value is indeterminate.

CSS Rules:

• root(.MuiLinearProgress-root): It is the style applied to the root element.
• colorPrimary(.MuiLinearProgress-colorPrimary): It is the style applied to the root and bar2 element if the color is set to primary and bar2 if the variant is set to buffer.
• colorSecondary(.MuiLinearProgress-colorSecondary): It is the style applied to the root and bar2 elements if color is set to secondary and bar2 if the variant is set to buffer.
• determinate(.MuiLinearProgress-determinate): It is the style applied to the root element if a variant is equal to determinate.
• indeterminate(.MuiLinearProgress-indeterminate): It is the style applied to the root element if a variant is set to indeterminate.
• buffer(.MuiLinearProgress-buffer): It is the style applied to the root element if a variant is a buffer.
• query(.MuiLinearProgress-query): It is the style applied to the root element if a variant is set to query.
• dashed(.MuiLinearProgress-dashed): It is the style applied to the additional bar element if a variant is set to buffer.
• dashedColorPrimary(.MuiLinearProgress-dashedColorPrimary): It is the style applied to the additional bar element if a variant is set to buffer and the color is set to primary.
• dashedColorSecondary(.MuiLinearProgress-dashedColorSecondary): It is the style applied to the additional bar element if a variant is set to buffer and the color is set to secondary.
• bar(.MuiLinearProgress-bar): It is the style applied to the layered bar1 and bar2 elements.
• barColorPrimary(.MuiLinearProgress-barColorPrimary): It is the style applied to the bar elements if color is set to primary and bar2 if a variant is not equal to buffer.
• barColorSecondary(.MuiLinearProgress-barColorSecondary): It is the style applied to the bar elements if color is set to secondary and bar2 if variant not buffer.
• bar1Indeterminate(.MuiLinearProgress-bar1Indeterminate): It is the style applied to the bar1 element if a variant is set to indeterminate or query.
• bar1Determinate(.MuiLinearProgress-bar1Determinate): It is the style applied to the bar1 element if variant=”determinate”.
• bar1Buffer(.MuiLinearProgress-bar1Buffer): It is the style applied to the bar1 element if variant=”buffer”.
• bar2Indeterminate(.MuiLinearProgress-bar2Indeterminate): It is the style applied to the bar2 element if variant=”indeterminate or query”.
• bar2Buffer(.MuiLinearProgress-bar2Buffer): It is the style applied to the bar2 element if variant=”buffer”.

Syntax: Create LinearProgress as follows:

<LinearProgress color="secondary"/>

Installing and Creating React app, and adding the MUI dependencies.

Step 1: Create a react project using the following command.

npx create-react-app gfg_tutorial

Step 2: Get into the project directory

cd gfg_tutorial

Step 3: Install the MUI dependencies as follows:

npm install @mui/material @emotion/react 
npm install @emotion/styled @mui/lab @mui/icons-material

Project Structure: The project structure should look like the below:

Steps to run the application: Run the project as follows:

npm start

Example 1: In the following example, we have a Paper component with different elevations.

App.js

import "./App.css";
import * as React from "react";
import Stack from "@mui/material/Stack";
import LinearProgress from "@mui/material/LinearProgress";
function App() {
    return (
        <div className="App">
            <div
                className="head"
                style={{
                    width: "fit-content",
                    margin: "auto",
                }}
            >
                <h1
                    style={{
                        color: "green",
                    }}
                >
                    GeeksforGeeks
                </h1>
                <strong>
                    React MUI LinearProgress API
                </strong>
            </div>
            <br />
            <div
                style={{
                    display: "flex",
                    justifyContent: "space-evenly",
                    width: "50%",
                    margin: "auto",
                }}
            >
                <Stack sx={{
                    width: "100%",
                    color: "grey.500"
                }}
                    spacing={2}>
                    <LinearProgress color="secondary" />
                    <LinearProgress color="success" />
                    <LinearProgress color="inherit" />
                </Stack>
            </div>
        </div>
    );
}

export default App;

Output:

Example 2: In the following example, we have a determinate LinearProgress bar.

App.js

import "./App.css";
import * as React from "react";
import Stack from "@mui/material/Stack";
import LinearProgress from "@mui/material/LinearProgress";
function App() {
    const [progress, setProgress] =
        React.useState(0);
    React.useEffect(() => {
        const timer = setInterval(() => {
            setProgress((oldProgress) => {
                if (oldProgress === 100) {
                    return 0;
                }
                const diff = Math.random() * 10;
                return Math.min(oldProgress + diff,
                    100);
            });
        }, 500);

        return () => {
            clearInterval(timer);
        };
    }, []);
    return (
        <div className="App">
            <div
                className="head"
                style={{
                    width: "fit-content",
                    margin: "auto",
                }}
            >
                <h1
                    style={{
                        color: "green",
                    }}
                >
                    GeeksforGeeks
                </h1>
                <strong>
                    React MUI LinearProgress API
                </strong>
            </div>
            <br />
            <div
                style={{
                    display: "flex",
                    justifyContent: "space-evenly",
                    width: "50%",
                    margin: "auto",
                }}
            >
                <Stack sx={{
                    width: "100%", color:
                        "grey.500"
                }}
                    spacing={2}>
                    <LinearProgress
                        variant="determinate"
                        value={progress}
                        color="secondary"
                    />
                </Stack>
            </div>
        </div>
    );
}

export default App;

Output:

Reference: https://mui.com/material-ui/api/linear-progress/