How To Add Progress Bar In React Applications

Introduction

In this article, we will discuss React Material UI Progress bar and Snackbar. Progress bar is used to inform the user that data loading is in progress. Basically it is used to show the loading state of data in an application.

You can check my previous articles in which we discussed ReactJS and its basic components from the below-mentioned links.

Prerequisites

Basic Knowledge of React
Visual Studio Code
Node and NPM installed
Material UI Installed

Create ReactJS project

Let's first create a React application using the following command.

npx create-react-app platform

Install Material-UI

Now Install Material-UI by using the following command.

npm install @material-ui/core --save

Now, right-click on the "src" folder and add a new component named 'Progressdemo.js'

Add the following code in Progressdemo component.

import React from 'react';
import clsx from 'clsx';
import { makeStyles } from '@material-ui/core/styles';
import CircularProgress from '@material-ui/core/CircularProgress';
import { green } from '@material-ui/core/colors';
import Button from '@material-ui/core/Button';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
const useStyles = makeStyles(theme => ({
buttonSuccess: {
backgroundColor: green[500],
'&:hover': {
backgroundColor: green[700],
},
},
buttonProgress: {
color: green[500],
position: 'absolute',
top: '50%',
left: '50%',
marginTop: -12,
marginLeft: -12,
},
}));
export default function Progessdemo() {
const classes = useStyles();
const [loading, setLoading] = React.useState(false);
const [success, setSuccess] = React.useState(false);
const timer = React.useRef();
const buttonClassname = clsx({
[classes.buttonSuccess]: success,
});
const handleButtonClick = () => {
if (!loading) {
setSuccess(false);
setLoading(true);
timer.current = setTimeout(() => {
setSuccess(true);
setLoading(false);
}, 2000);
}
};
return (
<>
<AppBar position="static">
<Toolbar style={{ 'paddingLeft': "600px" }}>
Material UI Progres Bar
</Toolbar>
</AppBar>
<div>
<div style={{ 'paddingLeft': "600px" }}>
{loading && <CircularProgress size={80} className={classes.buttonProgress} />}
</div>
<div style={{ 'paddingLeft': "600px" }}>
<Button
variant="contained"
color="primary"
className={buttonClassname}
disabled={loading}
onClick={handleButtonClick}
>
Click
</Button>
</div>
</div>
</>
);
}

Run the project by using 'npm start' and check the result:

Now, right-click on the "src" folder and add a new component named 'Progressdemo1.js' and add the following code int this component

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import LinearProgress from '@material-ui/core/LinearProgress';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
export default function Progessdemo1() {
return (
<>
<div style={{"marginBottom":"20px"}}>
<AppBar position="static">
<Toolbar style={{ 'paddingLeft': "600px" }}>
Material UI Progres Bar
</Toolbar>
</AppBar>
</div>
<div>
<LinearProgress />
<LinearProgress color="secondary" />
</div>
</>
);
}

Run the project by using 'npm start' and check the result.

Now, right-click on the "src" folder and add a new component named 'Snackbar.js' and add the following code int this component

import React from 'react';
import Button from '@material-ui/core/Button';
import Snackbar from '@material-ui/core/Snackbar';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
export default function SnackbarDemo() {
const [state, setState] = React.useState({
open: false,
vertical: 'top',
horizontal: 'center',
});
const { vertical, horizontal, open } = state;
const handleClick = newState => () => {
setState({ open: true, ...newState });
};
const handleClose = () => {
setState({ ...state, open: false });
};
return (
<div>
<AppBar position="static">
<Toolbar style={{ 'paddingLeft': "600px" }}>
Material UI Snack Bar
</Toolbar>
</AppBar>
<Button onClick={handleClick({ vertical: 'bottom', horizontal: 'center' })}>
Bottom-Center
</Button>
<Button onClick={handleClick({ vertical: 'bottom', horizontal: 'left' })}>Bottom-Left</Button>
<Button onClick={handleClick({ vertical: 'top', horizontal: 'left' })}>Top-Left</Button>
<Snackbar
anchorOrigin={{ vertical, horizontal }}
key={`${vertical},${horizontal}`}
open={open}
onClose={handleClose}
message="Snack Bar Demo"
/>
</div>
);
}

Open app.js file and add the following code:

import React from 'react';
import logo from './logo.svg';
import './App.css';
import SnackbarDemo from './Snackbar';
function App() {
return (
<div className="App">
<SnackbarDemo/>
</div>
);
}
export default App;

Run the project by using 'npm start' and check the result:

Summary

In this article, we learned how we add Progressbar and Snackbar in React applications using React material UI.