{"id":16752354,"url":"https://github.com/whizsid/react-progress-timer","last_synced_at":"2025-04-10T15:52:33.681Z","repository":{"id":57342763,"uuid":"220444866","full_name":"whizsid/react-progress-timer","owner":"whizsid","description":"Automatically calculating and displaying the time remaining by progress percentage.","archived":false,"fork":false,"pushed_at":"2020-09-04T17:10:05.000Z","size":148,"stargazers_count":5,"open_issues_count":0,"forks_count":2,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-02T00:35:51.457Z","etag":null,"topics":["average","calculate","complete","estimated","percentage","pinned","reactjs","remaining-time","time"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/whizsid.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-11-08T10:36:54.000Z","updated_at":"2021-05-06T21:57:41.000Z","dependencies_parsed_at":"2022-09-16T03:02:11.432Z","dependency_job_id":null,"html_url":"https://github.com/whizsid/react-progress-timer","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/whizsid%2Freact-progress-timer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/whizsid%2Freact-progress-timer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/whizsid%2Freact-progress-timer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/whizsid%2Freact-progress-timer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/whizsid","download_url":"https://codeload.github.com/whizsid/react-progress-timer/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248245462,"owners_count":21071492,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["average","calculate","complete","estimated","percentage","pinned","reactjs","remaining-time","time"],"created_at":"2024-10-13T02:46:44.464Z","updated_at":"2025-04-10T15:52:33.648Z","avatar_url":"https://github.com/whizsid.png","language":"TypeScript","readme":"\u003cp align=\"center\"\u003e\n\t\u003ca href=\"https://github.com/whizsid/react-progress-timer\"\u003e\n\t\t\t\u003cimg src=\"https://i.imgur.com/9FlfaSt.png\" /\u003e\n\t\u003c/a\u003e\n\u003c/p\u003e\n\n---\n\u003cp align=\"center\"\u003e\n\t\u003ca href=\"https://opensource.org/licenses/MIT\"\u003e\u003cimg src=\"https://img.shields.io/badge/License-MIT-green.svg\" alt=\"Travis:Status\"/\u003e\u003c/a\u003e\n\t\u003ca href=\"https://travis-ci.org/whizsid/react-progress-timer\"\u003e\u003cimg src=\"https://travis-ci.org/whizsid/react-progress-timer.svg?branch=master\" alt=\"Travis:Status\"/\u003e\u003c/a\u003e\n\t\u003ca href=\"https://github.com/whizsid/react-progress-timer\"\u003e\u003cimg src=\"https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square\" alt=\"Code Style: Prettier\"/\u003e\u003c/a\u003e\n\t\u003ca href=\"https://www.npmjs.com/package/react-progress-timer\"\u003e\u003cimg src=\"https://img.shields.io/npm/v/react-progress-timer\" alt=\"NPM: Version\"/\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n---\n\nThis 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.\n\n## Features\n\n- Calculate the time by percentage changing speed or average.\n- Automatically reducing the time even percentage will not changed.\n\n### [Watch Demo \u003e\u003e](https://whizsid.github.io/react-progress-timer)\n\n\n## Installation\n\nYou can install this component using yarn or npm\n\n```\n//yarn\n$ yarn add react-progress-timer\n\n//npm\n$ npm install react-progress-timer --save\n```\n\n## Usage\n\n```\nimport ProgressTimer from 'react-progress-timer';\n\n...\n\t\u003cProgressTimer\n\t\tpercentage={percent}\n\t/\u003e\n\n```\n\n## Documentation\n\nPlease provide following props. Props that marked with leading (*) are required.\n\n| Prop | Description | Type |\n| ------------- |:-------------| :-----|\n| *percentage | Current percentage of the progress | number|\n| initialText | Text to display when initializing. Default is `Initializing` | string |\n| completedText | Text to display after completed the task. Default is `Completed` | string |\n| decreaseTime | With this prop time will automatically decreasing even percentage not changed. By default this feature is enabled. | boolean |\n| calculateByAverage | Calculating time by average speed. By default calculating the speed by current speed | boolean|\n| format | Format to display the remaining time. Default:- `Completing in {value} {unit}`. You can also use the `{percentage}` placeholder. | string|\n| formatter | You can use your own formatter to format your string. Supply time in nano second to first parameter. | (time:number)=\u003estring |\n| rollingAverageWindowSize | When calculating by current speed, this specifies how many past values will be considered as \"current\". Default is 1 | number\n\n## Developing\n\n1. Clone the repository\n\n```\n$ git clone https://github.com/whizsid/react-progress-timer`\n```\n\n2. Install the dependencies\n\n```\n$ cd react-progress-timer\n$ yarn\n```\n\n3. Start the development server\n\n```\nyarn start\n```\n\n## Contributing\n\nPlease lint your code before made a PR.\n\n```\n$ yarn lint\n```\n\nAlways follow prettier code styles and check before making your PR.\n\n```\n$ yarn prettier\n```\n\nI will reply to all PRs when I have a free time. Issues and stars also welcome.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwhizsid%2Freact-progress-timer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwhizsid%2Freact-progress-timer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwhizsid%2Freact-progress-timer/lists"}