🤩
Windframe Import update is finally here!
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 node installed. To do this, run the following command in your terminal.

Code

r
node-v

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

If you don’t have nodejs 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 the 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

Resources

Trying to build out all user interfaces and components for your website or web app from scratch can become a very tedious task. A huge reason why we created Contrast Bootstrap to help 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 UI Kit featuring over 10000+ component variants. Together with a template of 5 admin dashboards and 23+ additional multipurpose pages template for building almost any type of website or web app. You can view a demo and learn more about Contrast by clicking here.Download the free react template

ad-banner

Contrast Bootstrap PRO was built using the most popular CSS framework Bootstrap to help build your next landing, admin SAAS, prelaunch etc project with a clean, prebuilt and well documented template and UI components.Learn more about Contrast

Related Posts

Comments

...