{"id":13535401,"url":"https://github.com/Feridum/angular2-circle-progress","last_synced_at":"2025-04-02T01:30:42.858Z","repository":{"id":102345437,"uuid":"66536612","full_name":"Feridum/angular2-circle-progress","owner":"Feridum","description":null,"archived":false,"fork":false,"pushed_at":"2016-08-25T08:16:33.000Z","size":1983,"stargazers_count":14,"open_issues_count":4,"forks_count":5,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-11-02T23:32:50.568Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","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/Feridum.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,"governance":null,"roadmap":null,"authors":null}},"created_at":"2016-08-25T07:44:10.000Z","updated_at":"2021-03-08T19:41:24.000Z","dependencies_parsed_at":null,"dependency_job_id":"e20832ec-d827-4aa1-b2de-b74e6b23647e","html_url":"https://github.com/Feridum/angular2-circle-progress","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Feridum%2Fangular2-circle-progress","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Feridum%2Fangular2-circle-progress/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Feridum%2Fangular2-circle-progress/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Feridum%2Fangular2-circle-progress/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Feridum","download_url":"https://codeload.github.com/Feridum/angular2-circle-progress/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246738408,"owners_count":20825777,"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":[],"created_at":"2024-08-01T08:00:55.604Z","updated_at":"2025-04-02T01:30:42.531Z","avatar_url":"https://github.com/Feridum.png","language":"TypeScript","readme":"# CircleProgress\n\nThis project was generated with [angular-cli](https://github.com/angular/angular-cli) version 1.0.0-beta.11-webpack.2.\n\n# [Demo](https://feridum.github.io/angular2-circle-progress/)\n\n## About\nIt is a simple circle progress component created for Angualar2. When it was creating Angular2 was in RC5 version.\nComponent is based only on SVG Graphics and has various of options to customize it.\n\n\n## Options\n\n\nOption | Type | Default | Description |Example\n--- | --- | --- | --- | ---\npercent | `number` | 0 | Number of percent you want to show | `[percent]=\"20\"`\nboxSize | `number` | 200| Size of whole svg element | `[boxSize]=\"300\"`\nradius | `number` | 180 | Radius od circle | `[radius]=\"90\"`\ntime| `number` | 0 | Time in sec for progress animation| `[time]=\"2\"` \nborder | `number` | 20 | Width of circle | `[border]=\"30\"`\ncolor | `string` | 'green' | Color of progress circle | `[color] = \"'blue'\"`\nbackgroundColor | `string` | 'white' | Color of rest of the circle | `[backgroundColor] = \"'purple'\"`\nlowColor | `string` | same os `color` option | Color for percent from 0%-\u003e25%| `[lowColor]=\"'red'\"`\nmiddleColor | `string` | look above | Color for percent from 26%-\u003e50%| `[lowColor]=\"'orange'\"`\ninterColor | `string` | look above | Color for percent from 51%-\u003e75%| `[lowColor]=\"'yellow'\"`\nhighColor | `string` | look above | Color for percent from 76%-\u003e100%| `[lowColor]=\"'green'\"`\nfontColor | `string` | black | Color of font inside circle | `[fontColor]=\"'grey'\"`\nfontSize | `number` | 12 | Size font inside circle | `[fontSize]=\"20\"`\nfontFamily | `string` | 'Times New Roman' | Family of font inside circle | `[fontColor]=\"'Arial'\"`\nfontX | `string` | '50%' | X position of text inside in circle | `[fontX]=\"'20%'\"`\nfontY | `string` | '55%' | Y position of text inside in circle | `[fontY]=\"'60%'\"`\ntextAnchor | `string` | 'middle' | Align of text. Possible values(start, middle, end) | `[textAnchor]=\"'end'\"`\ninnerFill | `string` | 'white' | Color of inner circle | `[fontY]=\"'pink'\"`\n\n## Animation\nTo start progress animation you have to call function `animate()` on component.\n\n## Example\n```\n\u003ccircle-progress #circleProg1\n                   [percent]=\"25\"\n                   [boxSize]=\"400\"\n                   [radius]=\"140\"\n                   [lowColor]=\"'red'\"\n                   [middleColor]=\"'orange'\"\n                   [interColor]=\"'#f1c40f'\"\n                   [highColor]=\"'#16a085'\"\n                   [border]=\"20\"\n                   [time]=\"5\"\n                   (click)=\"circleProg1.animate()\"\n  \u003e\u003c/circle-progress\u003e\n  ```\n","funding_links":[],"categories":["Uncategorized"],"sub_categories":["Uncategorized"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FFeridum%2Fangular2-circle-progress","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FFeridum%2Fangular2-circle-progress","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FFeridum%2Fangular2-circle-progress/lists"}