postImage

React Bootstrap Progress bar-How to create a beautiful React Bootstrap progress bar.

blogImage

By Emmanuel Chinonso

Web Developer

How to create linear and circular React progress bars.

React Bootstrap Progress bars are components that display the progress of a process in which the user is involved. Their color, shape, and animation can be customized with the contrast progress bar component. Contrast, also known as CDBReact or React Bootstrap, is a react library which is an Elegant UI kit with full bootstrap support that has reusable components for building mobile-first, responsive websites and web apps.

Prerequisites

The react-bootstrap progress bars would be built using React, Bootstrap, and CDBReact. You don’t need to have any previous knowledge of CDBReact, but the following are necessary:

  • JavaScript knowledge
  • Basic React Knowledge
  • Basic Bootstrap knowledge
  • NPM installed

The circular progress bar should look like the image below.

React Bootstrap Progress Bar

Setup

First, Check that you have the node installed. To do this, run the following command in your terminal.

Code

r
node-v

This should show you the current version of the node you have installed on your machine.

If you don’t have a node installed, download it here.

Installing node also installs npm on your PC but you can still confirm using npm-v. Now that we have node installed, we can start up our React project by going to the directory of our choice and running

Code:

r
npx create-react-app progressbar-app

I named the project progress-bar-app, but you can use any name of your choice.

Installing CDBReact-pro

To use the date-picker you need to use the pro version. And you can Install the cdbreact-pro package in your project (we recommend adding the file to the root of the project.) by running.

r
npm install --save ./path-to-the-cdbreact-pro-tgz-file

Or using Yarn

r
yarn add ./path-to-the-cdbreact-pro-tgz-file

Note that we don’t need to install bootstrap or add it anywhere in our project as CDBReact does that for us upon installation.

Circular progress bar

Let us go ahead to create a file named circularpro.js which would contain our progress bar component. Import the various progress bar components that we’ll be using.

Code:

jsx
import React from 'react';
import { CDBCircularProgress, CDBContainer } from 'cdbreact-pro';

In the code above, we import React from react and two components from the CDBReact, which are:

  • CDBContainer
  • CDBCircularProgress.

Code:

jsx
export const Progress = () => {
return (
<CDBContainer>
<CDBCircularProgress value={25} max={100} min={0} text={`${25}%`} />
<CDBCircularProgress value={50} max={100} min={0} text={`${50}%`} color="primary" />
<CDBCircularProgress value={95} max={100} min={0} color="secondary" text={`${95}%`} />
<CDBCircularProgress value={35} max={100} min={0} color="danger" text={`${35}%`} />
<CDBCircularProgress value={47} max={100} min={0} color="info" text={`${47}%`} />
<CDBCircularProgress value={100} max={100} min={0} color="success" text={`${100}%`} />
</CDBContainer>
);
};
export default Progress;

We added some styling to the react-bootstrap circular progress bar in the code above to make it look appealing.

Now, we can render the component in app.js.

Code:

jsx
import './App.css';
import tab from './ circularpro.js ';
import { BrowserRouter as Router } from 'react-router-dom';
function App() {
return (
<Router>
<div className="App">
<Progress />
</div>
</Router>
);
}
export default App;

The page will look like the image below.

React Bootstrap Progress bar

Linear progress bar

For the react-bootstrap linear progress bar, we will create a file named linearpro.js which would contain our progress bar component.

Installing CDBReact-pro

To use the date-picker, you need to use the pro version. And you can Install the cdbreact-pro package in your project (we recommend adding the file to the root of the project.) by running.

r
npm install --save ./path-to-the-cdbreact-pro-tgz-file

Or using Yarn

r
yarn add ./path-to-the-cdbreact-pro-tgz-file

Note that we don’t need to install bootstrap or add it anywhere in our project, as CDBReact does that for us upon installation.

Our react-bootstrap linear progress bar should look like this image below when we are done

React Progress Bar

Import the various progress bar components that we’ll be using.

Code:

jsx
import React from 'react';
import { CDBProgress, CDBContainer } from 'cdbreact-pro';

the code above imported React from react, the CDBProgress, and the CDBContainer from cdbreact

Code:

jsx
export const Progress = () => {
return (
<CDBContainer>
<CDBProgress
value={10}
text={`${10}%`}
colors="primary"
/>
<CDBProgress
value={20}
text={`${20}%`
colors="secondary"
/>
<CDBProgress
value={70}
text={`${70}%`}
colors="success"
/>
<CDBProgress
value={40}
text={`${40}%`}
colors="danger"
/>
<CDBProgress
value={90}
text={`${90}%`}
colors="info"
/>
<CDBProgress
value={60}
text={`${60}%`}
colors="warning"
/>
<CDBContainer/>
);
}
export default Progress;

This code adds features to the linear progress bar and is enclosed in a CDBContainer component from contrast.

Code:

jsx
import './App.css';
import tab from './ linearpro.js ';
import { BrowserRouter as Router } from 'react-router-dom';
function App() {
return (
<Router>
<div className="App">
<Progress />
</div>
</Router>
);
}
export default App;

in this code, we rendered our circular progress bar in our app.js file.

Your page should look like the image below

React Progress Bar

Conclusion

Creating a beautiful React Bootstrap progress bar is an easy way to improve the user experience of your website. Through careful consideration of what the progress bar should display, use of React Bootstrap components and some custom CSS, you can create a progress bar that is both aesthetically pleasing and informative. With the proper attention to detail and understanding of React Bootstrap, you can create a progress bar that will be enjoyed by your users.

Resources

Build modern projects using Bootstrap 5 and Contrast

Trying to create components and pages for a web app or website from scratch while maintaining a modern User interface can be very tedious. This is why we created Contrast, to help drastically reduce the amount of time we spend doing that. so we can focus on building some other aspects of the project.

Contrast Bootstrap PRO consists of a Premium UI Kit Library featuring over 10000+ component variants. Which even comes bundled together with its own admin template comprising of 5 admin dashboards and 23+ additional admin and multipurpose pages for building almost any type of website or web app.
See a demo and learn more about Contrast Bootstrap Pro by clicking here.

ad-banner

Related Posts

Comments

...