React.js Blueprint is a front-end UI toolkit. It is very optimized and popular for building interfaces that are complex data-dense for desktop applications. The progress bar component indicates the current stage of any operation with respect to the completion of the operation.
The props are:
- animate: It is a boolean value. It denotes whether the background should animate. It is true by default.
- className: It is a space-delimited list of class names to pass along to a child element.
- intent: It defines the visual intent color to apply to the element.
- stripes: It is a boolean value. It denotes whether the background should be striped or not. It is true by default.
- value: It takes a value between (0-1). It shows the progress meter.
Syntax:
<Progress.Bar />
Prerequisite: Introduction and installation ReactJS
Creating React Application and Module installation:
Step 1: Create the react project folder, for that open the terminal, and write the command npm create-react-app folder name, if you have already installed create-react-app globally. If you haven’t, install create-react-app globally using the command npm -g create-react-app or install locally by npm i create-react-app.
npm create-react-app project
Step 2: After creating your project folder(i.e. project), move to it by using the following command.
cd project
Step 3: now install the dependency by using the following command:
npm install @blueprintjs/core
Project Structure: It will look like this:
Example 1: We are importing the Progress Component from “@blueprintjs/core”. To apply the default styles of the components we are importing “@blueprintjs/core/lib/css/blueprint.css”.
We are adding two <Progress.Bar/> components, first one we are passing value 0.5 animate sets to false, intent value as “success”. For the next one, we have kept it simple and passed the value 1.
App.js
Javascript
import React from "react"; import "@blueprintjs/core/lib/css/blueprint.css"; import { ProgressBar } from "@blueprintjs/core"; function App() { return ( <div style={{ display: "block", width: 400, padding: 10 }}> <h4> ReactJS BluePrint Progress bar Component Props </h4> <ProgressBar value={0.5} animate={false} intent="success" /> <br></br> <ProgressBar value={1} /> </div> ); } export default App; |
Step to Run Application: Run the application using the following command from the project’s root directory.
npm start
Output:
Example 2: We are adding three <Progress.Bar/> components, first one we are passing value 0.5 stripes set to false, intent value as “primary”. For the next one, we are passing the className as “bp4-intent-danger” and passed the value 1. And for the next one, we are passing the className as “bp4-intent-warning” and passed the value 0.2.
App.js
Javascript
import React from "react"; import "@blueprintjs/core/lib/css/blueprint.css"; import { ProgressBar } from "@blueprintjs/core"; function App() { return ( <div style={{ display: "block", width: 400, padding: 10 }}> <h4> ReactJS BluePrint Progress bar Component Props </h4> <ProgressBar value={0.5} stripes={false} intent="primary" /> <br></br> <ProgressBar value={1} className="bp4-intent-danger" /> <br></br> <ProgressBar value={0.2} className="bp4-intent-warning" /> </div> ); } export default App; |
Step to Run Application: Run the application using the following command from the project’s root directory.
npm start
Output:
Reference: https://blueprintjs.com/docs/#core/components/progress-bar.props
