{"id":15589670,"url":"https://github.com/szastupov/progress-arc-component","last_synced_at":"2025-04-19T12:41:33.495Z","repository":{"id":65475707,"uuid":"78367877","full_name":"szastupov/progress-arc-component","owner":"szastupov","description":"Simple progress arc for React, customizable with styled-components","archived":false,"fork":false,"pushed_at":"2020-09-05T03:14:58.000Z","size":2176,"stargazers_count":45,"open_issues_count":2,"forks_count":6,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-12T20:37:12.642Z","etag":null,"topics":["react","styled-components"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/szastupov.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-01-08T20:14:07.000Z","updated_at":"2024-02-08T19:52:07.000Z","dependencies_parsed_at":"2023-01-25T15:00:43.786Z","dependency_job_id":null,"html_url":"https://github.com/szastupov/progress-arc-component","commit_stats":null,"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/szastupov%2Fprogress-arc-component","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/szastupov%2Fprogress-arc-component/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/szastupov%2Fprogress-arc-component/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/szastupov%2Fprogress-arc-component/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/szastupov","download_url":"https://codeload.github.com/szastupov/progress-arc-component/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249696345,"owners_count":21311860,"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":["react","styled-components"],"created_at":"2024-10-02T23:04:02.578Z","updated_at":"2025-04-19T12:41:33.461Z","avatar_url":"https://github.com/szastupov.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Simple progress arc for React ([demo](http://szastupov.github.io/progress-arc-component)) [![NPM version][npm-image]][npm-link] [![Build status][travis-image]][travis-link]\n\n## Installation\n\n    $ yarn add progress-arc-component\n\n## Usage\n\n```javascript\nimport ProgressArc from 'progress-arc-component'\n\n\u003cProgressArc value={63}/\u003e\n```\n\n![ProgressArc screenshot](http://i.imgur.com/vgxgdi9.png)\n\n### Properties\n\n Name                 | Description          | Default\n :------------------- | :------------------- | :------\n *value*              | Current progress     | 0\n *max*                | Maximum value        | 100\n *unit*               | Value unit           | %\n *arcColor*           | Progress arc color   | #818a91\n *arcBackgroundColor* | Arc background color | #eceeef\n *textColor*          | Text color           | #818a91\n *textVisible*        | Show text inside arc | true\n *radius*             | Arc radius           | 90\n *rounded*            | Draw rounded corners | false\n\n### Customization\n\nProgressArc generates SVG that can be tweaked with [styled-components][1]:\n\n```javascript\nimport styled from 'styled-components'\n\nconst StyledProgressArc = styled(ProgressArc)`\n  height: 12em;\n  width: 12em;\n  border: 0.3em solid black;\n  border-radius: 0.5em;\n  padding: 1em;\n`\n```\n\n\n[1]: https://github.com/styled-components/styled-components\n[npm-image]: https://img.shields.io/npm/v/progress-arc-component.svg?style=flat\n[npm-link]: https://npmjs.org/package/progress-arc-component\n[travis-image]: https://img.shields.io/travis/szastupov/progress-arc-component.svg?style=flat\n[travis-link]: https://travis-ci.org/szastupov/progress-arc-component\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fszastupov%2Fprogress-arc-component","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fszastupov%2Fprogress-arc-component","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fszastupov%2Fprogress-arc-component/lists"}