How To Create Progress Bar and Progress Spinner Using Prime React/ Prime Faces in React JS
In this article, we learned how to create a React project, set Prime React UI, and create React Js Progress Bar, Progress Spinner, and Prime React UI components.
Join the DZone community and get the full member experience.
Join For FreePRIMEREACT UI framework that has Over 80 React UI Components with top-notch quality to help you implement all your UI requirements in style.
PrimeReact components can be easily used/integrated with ProgressBar and ProgressSpinner. In this example, a register panel is simulated using ProgressBar and ProgressSpinner.
Preconditions
- Javascript
- Basic knowledge of ReactJS
- Node.js
- V.S. Code,Visual Studio
We cover the below things,
- Create React application
- Installation of Primeface
- ProgressBar and ProgressSpinner in ReactJS
Step 1
Run the below command to create ReactJS:
npx create-react-app prime-app
cd prime-app
npm start
Step 2
Run the below command for installing PrimeReact:
npm install primereact primeicons
Create the files according to the below image:
Step 3
Add the below code in the App.js:
import React, { useState, useEffect, useRef } from 'react';
import { ProgressBar } from 'primereact/progressbar';
import { Toast } from 'primereact/toast';
import { ProgressSpinner } from 'primereact/progressspinner';
function App() {
const [value1, setValue1] = useState(0);
const toast = useRef(null);
const interval = useRef(null);
const displayValueTemplate = (value) => {
return (
<React.Fragment>
{value}/<b>100</b>
</React.Fragment>
);
}
useEffect(() => {
let val = value1;
interval.current = setInterval(() => {
val += Math.floor(Math.random() * 10) + 1;
if (val >= 100) {
val = 100;
toast.current.show({ severity: 'info', summary: 'Success', detail: 'Process Completed' });
clearInterval(interval.current);
}
setValue1(val);
}, 2000);
return () => {
if (interval.current) {
clearInterval(interval.current);
interval.current = null;
}
}
}, []); // eslint-disable-line react-hooks/exhaustive-deps
return (
<div>
<Toast ref={toast}></Toast>
<div className="card">
<h5>Dynamic</h5>
<ProgressBar value={value1}></ProgressBar>
<h5>Static</h5>
<ProgressBar value={50}></ProgressBar>
<h5>Custom display value</h5>
<ProgressBar value={40} displayValueTemplate={displayValueTemplate}></ProgressBar>
<h5>Indeterminate</h5>
<ProgressBar mode="indeterminate" style={{ height: '6px' }}></ProgressBar>
</div>
<div>
<div className="card">
<h5>Basic</h5>
<ProgressSpinner />
<h5>Custom</h5>
<ProgressSpinner style={{width: '50px', height: '50px'}} strokeWidth="8" fill="var(--surface-ground)" animationDuration=".5s"/>
</div>
</div>
</div>
);
}
export default App;
Step 4
Add the below code in index.html: