React Radial Progress Bar

A circular progress bar component and customizable

Installation

For PrivJs users:

$ npm config set @bc:registry https://r.privjs.com
$ npm login --registry https://r.privjs.com
$ npm install @bc/react-radial-progress-bar

For guest users:

$ npm config set //r.privjs.com/:_authToken <your-auth-token>
$ npm install @bc/react-radial-progress-bar

Usage

Import the component and default styles:

import { CircularProgressBar } from '@bc/react-radial-progress-bar';

Now you can use the component:

const percentage = 66;

<CircularProgressBar completed={percentage} bgcolor="#00A699" textcolor="#222" />;

You can create a mock progress bar.

import React from 'react';

import { CircularProgressBar } from '@bc/react-radial-progress-bar';

const ProgressBarCounter = () => {
    const [seconds, setSeconds] = React.useState(0);

    React.useEffect(() => {
        const interval = setInterval(function(){
            setInterval(seconds === 100 ? 0 : seconds + 1);
        }, 100);

        return () => clearInterval(interval);
    });

    return <CircularProgressBar completed={seconds} bgcolor="#00A699" textcolor="#222" />;
};

export default ProgressBarCounter;