Nextjs Progress

The Nextjs progress components can be used to show a user how far along he/she is in a process. These Nextjs progress bars are built with two HTML elements, some CSS to set the width, and a few attributes. Now keep reading some examples to see how Nextjs Progress bars work.

Example

Task completed
60%
Task completed
60%
Task completed
60%
Task completed
60%
Task completed
60%
Task completed
60%
Task completed
60% 
import React from "react";

// reactstrap components
import { Progress } from "reactstrap";

function Example() {
  return (
    <>
      <div className=" progress-wrapper">
        <div className=" progress-info">
          <div className=" progress-label">
            <span>Task completed</span>
          </div>
          <div className=" progress-percentage">
            <span>60%</span>
          </div>
        </div>
        <Progress max="100" value="60" color="default"></Progress>
      </div>
      <div className=" progress-wrapper">
        <div className=" progress-info">
          <div className=" progress-label">
            <span>Task completed</span>
          </div>
          <div className=" progress-percentage">
            <span>60%</span>
          </div>
        </div>
        <Progress max="100" value="60" color="primary"></Progress>
      </div>
      <div className=" progress-wrapper">
        <div className=" progress-info">
          <div className=" progress-label">
            <span>Task completed</span>
          </div>
          <div className=" progress-percentage">
            <span>60%</span>
          </div>
        </div>
        <Progress max="100" value="60" color="secondary"></Progress>
      </div>
      <div className=" progress-wrapper">
        <div className=" progress-info">
          <div className=" progress-label">
            <span>Task completed</span>
          </div>
          <div className=" progress-percentage">
            <span>60%</span>
          </div>
        </div>
        <Progress max="100" value="60" color="info"></Progress>
      </div>
      <div className=" progress-wrapper">
        <div className=" progress-info">
          <div className=" progress-label">
            <span>Task completed</span>
          </div>
          <div className=" progress-percentage">
            <span>60%</span>
          </div>
        </div>
        <Progress max="100" value="60" color="success"></Progress>
      </div>
      <div className=" progress-wrapper">
        <div className=" progress-info">
          <div className=" progress-label">
            <span>Task completed</span>
          </div>
          <div className=" progress-percentage">
            <span>60%</span>
          </div>
        </div>
        <Progress max="100" value="60" color="danger"></Progress>
      </div>
      <div className=" progress-wrapper">
        <div className=" progress-info">
          <div className=" progress-label">
            <span>Task completed</span>
          </div>
          <div className=" progress-percentage">
            <span>60%</span>
          </div>
        </div>
        <Progress max="100" value="60" color="warning"></Progress>
      </div>
    </>
  );
}

export default Example;

Props

If you want to see more examples and properties please check the official Reactstrap Documentation.