react-progressbar-cs

Getting started

Compatibility

Your project needs to use React 16.8 or later.

Installation

Add react-progressbar to your project by executing npm install react-progressbar-cs or yarn add react-progressbar-cs.

Usage

Here's an example of basic usage:

import { useState, useEffect } from 'react';
import Progressbar from 'react-progressbar-cs';
import "react-progressbar-cs/dist/progressbar.css";

function MyApp() {
  const [progress, setProgress] = useState(0);

  useEffect(() => {
     const timer = setInterval(() => {
       setProgress((prevProgress) => {
         if (prevProgress >= 100) {
           clearInterval(timer);
           return 100;
         }
         const randomIncrement = Math.floor(Math.random() * 5) + 1; 
         return Math.min(prevProgress + randomIncrement, 100); 
       });
     }, 1000);

  return (
  <div style={{ textAlign: "center", marginTop: "50px" }}>

        <h2>Linear Progress</h2>
        <div style={{ justifyContent: "center", display: "flex" }}>
          <Progressbar progress={progress} type="linear" width="300px" height="25px" textSize={16} />
        </div>

        <h2 style={{ marginTop: "50px" }}>Circular Progress</h2>
        <Progressbar progress={progress} type="circle" circleSize={150} strokeWidth={10} textSize={20} />

      </div>
  );
}

License

The MIT License.

Thank you