{"id":22097008,"url":"https://github.com/pguso/angular-circliful","last_synced_at":"2026-01-04T23:07:43.545Z","repository":{"id":57178149,"uuid":"255376367","full_name":"pguso/angular-circliful","owner":"pguso","description":"circle statistic for angular","archived":false,"fork":false,"pushed_at":"2020-04-14T09:05:30.000Z","size":96,"stargazers_count":1,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-01T13:49:00.054Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://stackblitz.com/edit/angular-dwxhu5","language":null,"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/pguso.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":"2020-04-13T16:07:48.000Z","updated_at":"2021-05-28T15:45:28.000Z","dependencies_parsed_at":"2022-09-14T02:31:14.225Z","dependency_job_id":null,"html_url":"https://github.com/pguso/angular-circliful","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/pguso%2Fangular-circliful","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pguso%2Fangular-circliful/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pguso%2Fangular-circliful/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pguso%2Fangular-circliful/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pguso","download_url":"https://codeload.github.com/pguso/angular-circliful/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245191590,"owners_count":20575250,"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-12-01T04:13:55.797Z","updated_at":"2026-01-04T23:07:43.466Z","avatar_url":"https://github.com/pguso.png","language":null,"funding_links":["https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick\u0026hosted_button_id=D3F2MMNDHQ9KQ"],"categories":[],"sub_categories":[],"readme":"# Angular Circliful \n\nDraws an animatable svg circle with some other features in your angular projects.\n\n## Getting started\n\n#### Install circliful in your project\n```\nnpm install angular-circliful\n```\n\n#### Once installed you need to import the module:\u003c/h3\u003e\n```typescript\nimport {AngularCirclifulModule} from 'angular-circliful';\n\n@NgModule({\n  ...\n  imports: [AngularCirclifulModule, ...],\n  ...\n})\nexport class AppModule {}\n```\n\n#### Integrate the component somewhere in your Application\u003c/h3\u003e\n```typescript\nexport class YourComponent {\npercent = {\n    value: 60\n};\nstrokeWidth = 15;\ncolor = 'blue';\n}\n```\n\n```html\n\u003cac-angular-circliful \n[percent]=\"percent\" \n[strokeWidth]=\"strokeWidth\"\n[color]=\"color\"\u003e\n\u003c/ac-angular-circliful\u003e\n```\n\nAvailable Options\n\n| property        | default           | type  | description\n| ------------- |------------- | ----- | ----- |\n| percent      | / | object | the percentage of the circle\n| color      | #666 | string | color foreground circle \n| gradient      | / | object | startColor and endColor for gradient of foreground circle\n| customClasses      | / | object | set custom css classes for each svg child element \n| strokeLinecap      | butt | string | style of stroke endings\n| strokeWidth      | 15 | number | stroke width of foreground circle\n| progressColors      | / | array | holds an array of objects with color and percent, the percent value is the starting point for the color change\n| backgroundCircle      | / | object | config for the background circle \n| animate      | true | boolean | animation of the foreground circle\n| animateInView      | false | boolean | animation of the foreground circle in viewport\n| text      | / | object | config for the info text\n| point      | / | object | config for a point in the center \n\n**percent** percentage text and percentage fill of foreground circle\n\n| property        | default           | type  \n| ------------- |------------- | ----- | \n| value      | / | number \n| color      | / | string\nnoPercentageSign | false | boolean\n\n**gradient** start end end color of gradient\n\n| property        | default           | type  \n| ------------- |------------- | ----- | \n| startColor      | / | string \n| endColor      | / | string\n\n**customClasses** set custom css classes for each svg child element\n\n| property        | default           | type  \n| ------------- |------------- | ----- | \n| foregroundCircle      | / | string \n| backgroundCircle      | / | string\n| percent      | / | string \n| text      | / | string\n| svgContainer      | / | string\n| point      | / | string\n\n**progressColors** holds an array of objects with color and percent, the percent value is the starting point for the color change\n\n| property        | default           | type  \n| ------------- |------------- | ----- | \n| color      | / | string \n| percent      | / | number \n\n**backgroundCircle** config for the background circle\n\n| property        | default           | type  \n| ------------- |------------- | ----- | \n| color      | / | string \n| strokeWidth      | / | number\n\n**text** config for the info text\n\n| property        | default           | type  \n| ------------- |------------- | ----- | \n| position      | 'middle' | string \n| x      | / | number\n| y      | / | number\n| content      | / | string\n\n**point** config for a point in the center\n\n| property        | default           | type  \n| ------------- |------------- | ----- | \n| color      | / | string \n| radius      | / | number\n\n\n\n\n\n\nDonation\n--------\nIf you find this module useful or/and use it commercially feel free to donate me a cup of coffee :)\n\n[![](https://www.paypalobjects.com/en_US/i/btn/btn_donateCC_LG.gif)](https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick\u0026hosted_button_id=D3F2MMNDHQ9KQ)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpguso%2Fangular-circliful","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpguso%2Fangular-circliful","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpguso%2Fangular-circliful/lists"}