{"id":13497362,"url":"https://github.com/CharlesGrimont/angular-progress-bar","last_synced_at":"2025-03-28T21:32:28.819Z","repository":{"id":43557130,"uuid":"109895774","full_name":"CharlesGrimont/angular-progress-bar","owner":"CharlesGrimont","description":"This component allow you to easy incorporate progress-bar to angular/ionic project, providing binding and color options","archived":false,"fork":false,"pushed_at":"2020-05-05T11:44:51.000Z","size":49,"stargazers_count":26,"open_issues_count":5,"forks_count":17,"subscribers_count":2,"default_branch":"develop","last_synced_at":"2024-04-25T15:03:30.700Z","etag":null,"topics":["angular","angular2","angular4","angular5","angular6","angular7","angular8","bar","ionic","ionic2","ionic3","ionic4","percent","progress","progress-bar","progressbar","toc"],"latest_commit_sha":null,"homepage":"","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/CharlesGrimont.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-11-07T21:58:06.000Z","updated_at":"2021-10-05T22:11:10.000Z","dependencies_parsed_at":"2022-07-12T18:19:06.147Z","dependency_job_id":null,"html_url":"https://github.com/CharlesGrimont/angular-progress-bar","commit_stats":null,"previous_names":[],"tags_count":12,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CharlesGrimont%2Fangular-progress-bar","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CharlesGrimont%2Fangular-progress-bar/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CharlesGrimont%2Fangular-progress-bar/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CharlesGrimont%2Fangular-progress-bar/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/CharlesGrimont","download_url":"https://codeload.github.com/CharlesGrimont/angular-progress-bar/tar.gz/refs/heads/develop","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":222418056,"owners_count":16981262,"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":["angular","angular2","angular4","angular5","angular6","angular7","angular8","bar","ionic","ionic2","ionic3","ionic4","percent","progress","progress-bar","progressbar","toc"],"created_at":"2024-07-31T20:00:29.657Z","updated_at":"2024-10-31T13:31:33.723Z","avatar_url":"https://github.com/CharlesGrimont.png","language":"TypeScript","readme":"\u003cp align=\"center\"\u003e\n  \u003ch2 align=\"center\"\u003e Angular Progress Bar\u003c/h2\u003e\n\u003c/p\u003e\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://opensource.org/licenses/MIT\"\u003e\u003cimg src=\"https://img.shields.io/badge/License-MIT-yellow.svg\" alt=\"License\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/angular-progress-bar\"\u003e\u003cimg src=\"https://badge.fury.io/js/angular-progress-bar.svg?style=flat-square\" alt=\"NPM version\"\u003e\u003c/a\u003e\n\u003c/p\u003e \n\n## Toc\n- [Toc](#toc)\n- [Introduction](#introduction)\n- [Online demo](#online-demo)\n- [Appearance](#appearance)\n  - [Basic](#basic)\n  - [Grey](#grey)\n- [Installation](#installation)\n- [How to use](#how-to-use)\n  - [Classic way](#classic-way)\n  - [Color degraded way](#color-degraded-way)\n  - [Disable display of percentage](#disable-display-of-percentage)\n\n## Introduction ##\n\nAngular progress bar is a component available from Angular 2, 4, 5, 6, 7, 8, 9 and Ionic 2, 3, 4, and 5.\n\nThis component allow you to manage a progress visually\n\n## Online demo ##\n\nYou can find a demo at https://angular-progress-bar-demo.stackblitz.io\n## Appearance ##\n\n### Basic ###\n  \u003cimg src=\"./assets/angular-progress-bar.png?raw=true\" alt=\"Appearence\"\u003e\n\n### Grey ###\n  \u003cimg src=\"./assets/angular-progress-bar-50.PNG?raw=true\" alt=\"Appearence\"\u003e\n  \n## Installation ##\n\nType the following command to install the package:\n    \n```shell\nnpm install angular-progress-bar@latest --save\n```\n    \nThen you need to import it into your app modules\n\n```typescript\nimport {ProgressBarModule} from \"angular-progress-bar\"\n\n@NgModule({\n    imports: [\n        ProgressBarModule\n    ]\n})\n```\n          \n\n## How to use ##\n\n### Classic way ###\n\nBy this way, progress property will be the value shown in the progress bar, and color property will be the color displayed\n  \n```html\n\u003cprogress-bar [progress]=\"100\" [color]=\"'#488aff'\"\u003e\n\u003c/progress-bar\u003e\n```\n\n### Color degraded way ###\n\nBy this way, progress property will be the value shown in the progress bar, but color-degraded property must be binded ton an object.\n\nThis object, must contains a key value made be a string that represent a percent, and the value must be an hexadecimal color\n\nin the example show below, from 0 to 15 percent the color will be #00cbcb then from 16 to 25 percent the color will be #f9c3d3 and then from 25 to the end the color will be #fd8c8e\n\n```html\n\u003cprogress-bar [progress]=\"100\" [color-degraded]=\"{'0': '#00cbcb',  '15': '#f9c3d3', '25': '#fd8c8e'}\"\u003e\n\u003c/progress-bar\u003e\n  ```\n\n### Disable display of percentage ###\n\nYou can disable display of percentage by using disable-percentage property\n\n```html\n\u003cprogress-bar [progress]=\"80\" [disable-percentage]=\"true\"\u003e\n\u003c/progress-bar\u003e\n  ```\n","funding_links":[],"categories":["Uncategorized"],"sub_categories":["Uncategorized"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FCharlesGrimont%2Fangular-progress-bar","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FCharlesGrimont%2Fangular-progress-bar","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FCharlesGrimont%2Fangular-progress-bar/lists"}