This react component will automatically calculate the time to complete a progress bar by percentage changing speed. You want supply only the current percentage as a prop.

Features

• Calculate the time by percentage changing speed or average.
• Automatically reducing the time even percentage will not changed.

Watch Demo >>

Installation

You can install this component using yarn or npm

//yarn
$ yarn add react-progress-timer

//npm
$ npm install react-progress-timer --save

Usage

import ProgressTimer from 'react-progress-timer';

...
	<ProgressTimer
		percentage={percent}
	/>

Documentation

Please provide following props. Props that marked with leading (*) are required.

| Prop | Description | Type | | ------------- |:-------------| :-----| | *percentage | Current percentage of the progress | number| | initialText | Text to display when initializing. Default is Initializing | string | | completedText | Text to display after completed the task. Default is Completed | string | | decreaseTime | With this prop time will automatically decreasing even percentage not changed. By default this feature is enabled. | boolean | | calculateByAverage | Calculating time by average speed. By default calculating the speed by current speed | boolean| | format | Format to display the remaining time. Default:- Completing in {value} {unit}. You can also use the {percentage} placeholder. | string| | formatter | You can use your own formatter to format your string. Supply time in nano second to first parameter. | (time:number)=>string | | rollingAverageWindowSize | When calculating by current speed, this specifies how many past values will be considered as "current". Default is 1 | number

Developing

1. Clone the repository

$ git clone https://github.com/whizsid/react-progress-timer`

2. Install the dependencies

$ cd react-progress-timer
$ yarn

3. Start the development server

yarn start

Contributing

Please lint your code before made a PR.

$ yarn lint

Always follow prettier code styles and check before making your PR.

$ yarn prettier

I will reply to all PRs when I have a free time. Issues and stars also welcome.