React Suite Progress Circle

React Suite is a front-end library designed for the middle platform and back-end products. The React Suite Progress component allows the user to see the progress of a certain program or any operation in the process.

The <Progress.Circle> component displays the progress as a circle.

The props used are described below:

• classPrefix: This denotes the prefix of the component CSS class. Specifying any value here will change the name of the class of the Component. This can be useful for applying custom styling based on the class name. The default value is “progress”.
• gapDegree: It denotes the gap degree of half circle(0 – 360)
• gapPosition: It defines the notch position.It takes either of these values :- ‘right’, ‘top’, ‘bottom’ or ‘left’ .
• percent: It defines the Percent of progress.
• showInfo: It is a boolean value. It shows the text. It is true by default.
• status: It defines the status of progress. It takes either of the values ‘success’, ‘fail’, or ‘active’.
• strokeColor: It denotes the color of the line.
• strokeLinecap: It defines the end of different types of open paths. It takes either of the values  ’round’, ‘square’ or ‘butt’.
• strokeWidth: It denotes the line width.
• trailColor: It defines the color of the trail.
• trailWidth: It defines the width of the trail.

Syntax:

<Progress.Circle/>

Prerequisite:

• Introduction and installation ReactJS
• React Suite Progress Component

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 rsuite

Project Structure: It will look like this:

Example 1: We are importing the Progress Component from “rsuite”, and to apply the default styles of the components we are importing “rsuite/dist/rsuite.min.css”.

We are adding four <Progress.circle> components, with some styling. To the first, we are passing percent and gapDegree props. To the second component, we are passing gapDegree, strokeLinecap, status, percent, and strokeWidth. To the third component, we pass the gapDegree, gapPosition, strokeLinecap, strokeColor, percent, and showInfo set to false. For the fourth one, we are passing the props percent and trailColor.

App.js

import { Progress } from "rsuite";
import "rsuite/dist/rsuite.min.css";

function App() {
  const style = {
    width: 150,
    display: "inline-block",
    marginRight: 20,
    marginLeft: 20,
  };

  return (
    <div className="App">
      <h4> React Suite Progress Circle</h4>
      <div style={style}>
        <Progress.Circle gapDegree={60} percent={40} />
      </div>

      <div style={style}>
        <Progress.Circle
          gapDegree={160}
          strokeLinecap="square"
          percent={80}
          status="success"
          strokeWidth={8}
        />
      </div>
      <br />
      <div style={style}>
        <Progress.Circle
          gapDegree={160}
          gapPosition="right"
          strokeLinecap="square"
          percent={80}
          strokeColor="yellow"
          showInfo={false}
        />
      </div>

      <div style={style}>
        <Progress.Circle percent={20} trailColor="black" />
      </div>
    </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: To the first <Progress.Circle> component, we are passing the classPrefix as “progress”, gapDegree, strokeLinecap, percent, status, trailColor, trailWidth, strokeWidth, showInfo and gapPosition. To the second component, we are passing the props gapDegree, gapPosition, strokeColor, percent, and classPrefix as ‘nav’. To the third component, we are passing the percent,trailColor, and classPrefix as ‘sidenav’.

App.js

import { Progress } from "rsuite";
import "rsuite/dist/rsuite.min.css";

function App() {
  const style = {
    width: 150,
    display: "inline-block",
    marginRight: 20,
    marginLeft: 20,
  };

  return (
    <div className="App">
      <h4> React Suite Progress Circle</h4>

      <div style={style}>
        <Progress.Circle
          classPrefix="progress"
          gapDegree={60}
          strokeLinecap="butt"
          percent={50}
          status="success"
          trailColor="red"
          trailWidth={8}
          strokeWidth={8}
          showInfo={false}
          gapPosition="bottom"
        />
      </div>

      <div style={style}>
        <Progress.Circle
          classPrefix="nav"
          gapDegree={60}
          percent={50}
          strokeColor="blue"
          gapPosition="top"
        />

        <Progress.Circle
          classPrefix="sidenav"
          percent={10}
          trailColor="orange"
        />
      </div>
    </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://rsuitejs.com/components/progress/#code-lt-progress-circle-gt-code