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

Create ReactJS project

 
Let's first create a React application using the following command.
  1. npx create-react-app platform   

Install Material-UI

 
Now Install Material-UI by using the following command.
  1. 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. 
  1. import React from 'react';  
  2. import clsx from 'clsx';  
  3. import { makeStyles } from '@material-ui/core/styles';  
  4. import CircularProgress from '@material-ui/core/CircularProgress';  
  5. import { green } from '@material-ui/core/colors';  
  6. import Button from '@material-ui/core/Button';  
  7. import AppBar from '@material-ui/core/AppBar';  
  8. import Toolbar from '@material-ui/core/Toolbar';  
  9. const useStyles = makeStyles(theme => ({  
  10.   
  11.   
  12.   buttonSuccess: {  
  13.     backgroundColor: green[500],  
  14.     '&:hover': {  
  15.       backgroundColor: green[700],  
  16.     },  
  17.   },  
  18.   
  19.   buttonProgress: {  
  20.     color: green[500],  
  21.     position: 'absolute',  
  22.     top: '50%',  
  23.     left: '50%',  
  24.     marginTop: -12,  
  25.     marginLeft: -12,  
  26.   },  
  27. }));  
  28.   
  29. export default function Progessdemo() {  
  30.   const classes = useStyles();  
  31.   const [loading, setLoading] = React.useState(false);  
  32.   const [success, setSuccess] = React.useState(false);  
  33.   const timer = React.useRef();  
  34.   
  35.   const buttonClassname = clsx({  
  36.     [classes.buttonSuccess]: success,  
  37.   });  
  38.   
  39.   
  40.   const handleButtonClick = () => {  
  41.     if (!loading) {  
  42.       setSuccess(false);  
  43.       setLoading(true);  
  44.       timer.current = setTimeout(() => {  
  45.         setSuccess(true);  
  46.         setLoading(false);  
  47.       }, 2000);  
  48.     }  
  49.   };  
  50.   
  51.   return (  
  52.           <>  
  53.         <AppBar position="static">  
  54.         <Toolbar style={{ 'paddingLeft'"600px" }}>  
  55.                 Material UI Progres Bar  
  56.   </Toolbar>  
  57. </AppBar>  
  58.     <div>  
  59.       <div style={{ 'paddingLeft'"600px" }}>  
  60.         {loading && <CircularProgress size={80} className={classes.buttonProgress} />}  
  61.       </div>  
  62.       <div style={{ 'paddingLeft'"600px" }}>  
  63.         <Button  
  64.           variant="contained"  
  65.           color="primary"  
  66.           className={buttonClassname}  
  67.           disabled={loading}  
  68.           onClick={handleButtonClick}  
  69.         >  
  70.          Click  
  71.         </Button>  
  72.         
  73.       </div>  
  74.         
  75.     </div>  
  76.     </>  
  77.   );  
  78. }  
 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
  1.  import React from 'react';  
  2. import { makeStyles } from '@material-ui/core/styles';  
  3. import LinearProgress from '@material-ui/core/LinearProgress';  
  4. import AppBar from '@material-ui/core/AppBar';  
  5. import Toolbar from '@material-ui/core/Toolbar';  
  6. export default function Progessdemo1() {  
  7.   return (  
  8.     <>  
  9.     <div style={{"marginBottom":"20px"}}>  
  10.     <AppBar position="static">  
  11.     <Toolbar style={{ 'paddingLeft'"600px" }}>  
  12.             Material UI Progres Bar  
  13. </Toolbar>  
  14. </AppBar>  
  15. </div>  
  16.     <div>  
  17.       <LinearProgress />  
  18.       <LinearProgress color="secondary" />  
  19.     </div>  
  20.     </>  
  21.   );  
  22. }  

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 
  1. import React from 'react';  
  2. import Button from '@material-ui/core/Button';  
  3. import Snackbar from '@material-ui/core/Snackbar';  
  4. import AppBar from '@material-ui/core/AppBar';  
  5. import Toolbar from '@material-ui/core/Toolbar';  
  6. export default function SnackbarDemo() {  
  7.   const [state, setState] = React.useState({  
  8.     open: false,  
  9.     vertical: 'top',  
  10.     horizontal: 'center',  
  11.   });  
  12.   
  13.   const { vertical, horizontal, open } = state;  
  14.   
  15.   const handleClick = newState => () => {  
  16.     setState({ open: true, ...newState });  
  17.   };  
  18.   
  19.   const handleClose = () => {  
  20.     setState({ ...state, open: false });  
  21.   };  
  22.   
  23.   return (  
  24.     <div>  
  25.               <AppBar position="static">  
  26.     <Toolbar style={{ 'paddingLeft'"600px" }}>  
  27.             Material UI Snack Bar  
  28. </Toolbar>  
  29. </AppBar>  
  30.        
  31.       <Button onClick={handleClick({ vertical: 'bottom', horizontal: 'center' })}>  
  32.         Bottom-Center  
  33.       </Button>  
  34.       <Button onClick={handleClick({ vertical: 'bottom', horizontal: 'left' })}>Bottom-Left</Button>  
  35.       <Button onClick={handleClick({ vertical: 'top', horizontal: 'left' })}>Top-Left</Button>  
  36.       <Snackbar  
  37.         anchorOrigin={{ vertical, horizontal }}  
  38.         key={`${vertical},${horizontal}`}  
  39.         open={open}  
  40.         onClose={handleClose}  
  41.         message="Snack  Bar Demo"  
  42.       />  
  43.     </div>  
  44.   );  
  45. }  
Open app.js file and add the following code:
  1. import React from 'react';  
  2. import logo from './logo.svg';  
  3. import './App.css';  
  4. import SnackbarDemo from './Snackbar';  
  5. function App() {  
  6.   return (  
  7.     <div className="App">  
  8.       <SnackbarDemo/>  
  9.     </div>  
  10.   );  
  11. }  
  12.   
  13. 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.


Similar Articles