{"id":22683105,"url":"https://github.com/kken94/ngx-progress","last_synced_at":"2025-10-10T07:34:56.039Z","repository":{"id":36130556,"uuid":"221470770","full_name":"kKen94/ngx-progress","owner":"kKen94","description":" The most powerful and customizable progress bar for Angular ✨","archived":false,"fork":false,"pushed_at":"2023-02-03T05:11:28.000Z","size":14254,"stargazers_count":21,"open_issues_count":12,"forks_count":3,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-12T18:13:29.246Z","etag":null,"topics":["angular","angular10","angular11","angular12","angular13","angular2","http","http-interceptor","http-loader","ng-loader","ngx-loader","ngx-loading","ngx-loading-bar","ngx-progress-bar","ngx-spinner","spinner"],"latest_commit_sha":null,"homepage":"https://kken94.github.io/ngx-progress","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/kKen94.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-11-13T13:52:31.000Z","updated_at":"2022-07-13T05:30:37.000Z","dependencies_parsed_at":"2023-02-18T03:45:42.363Z","dependency_job_id":null,"html_url":"https://github.com/kKen94/ngx-progress","commit_stats":null,"previous_names":[],"tags_count":29,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kKen94%2Fngx-progress","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kKen94%2Fngx-progress/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kKen94%2Fngx-progress/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kKen94%2Fngx-progress/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kKen94","download_url":"https://codeload.github.com/kKen94/ngx-progress/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248610340,"owners_count":21132920,"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","angular10","angular11","angular12","angular13","angular2","http","http-interceptor","http-loader","ng-loader","ngx-loader","ngx-loading","ngx-loading-bar","ngx-progress-bar","ngx-spinner","spinner"],"created_at":"2024-12-09T21:10:09.837Z","updated_at":"2025-10-10T07:34:51.002Z","avatar_url":"https://github.com/kKen94.png","language":"TypeScript","readme":"# @kken94/ngx-progress\n[![Build Status](https://img.shields.io/travis/kKen94/ngx-progress/master?style=flat-square)](https://travis-ci.org/kKen94/ngx-progress)\n[![npm version](https://img.shields.io/npm/v/@kken94/ngx-progress.svg?style=flat-square)](https://www.npmjs.com/package/@kken94/ngx-progress \"View this project on npm\")\n[![CodeClimate](https://img.shields.io/codeclimate/maintainability/kKen94/ngx-progress.svg?style=flat-square)](https://api.codeclimate.com/v1/badges/53e353f983e519dfa7bc/maintainability)\n[![Codacy](https://img.shields.io/codacy/grade/fbe1a29dad2448c8a1dfd9661eea7d79?style=flat-square)](https://www.codacy.com/manual/kKen94/ngx-progress?utm_source=github.com\u0026amp;utm_medium=referral\u0026amp;utm_content=kKen94/ngx-progress\u0026amp;utm_campaign=Badge_Grade)\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)\n[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg?style=flat-square)](https://github.com/semantic-release/semantic-release)\n[![license](https://img.shields.io/github/license/kKen94/ngx-progress?style=flat-square)](http://opensource.org/licenses/MIT)\n[![Donate](https://img.shields.io/badge/Donate-PayPal-blue.svg?style=flat-square)](https://paypal.me/nicolataddei)\n\nNgxProgress is customizable Angular library for showing a progress bar during http request and/or routing change (or all you want) and prevent user interaction.\n\n## Changelog\n\n[Please read the changelog](CHANGELOG.md)\n\n## Installation\n\nIf you use [npm](https://www.npmjs.com/package/npm)\n\n```bash\nnpm install @kken94/ngx-progress --save\n```\n\nIf you use [yarn](https://yarnpkg.com/)\n\n```bash\nyarn add @kken94/ngx-progress\n```\n\n## Usage\n\nChoose the most suitable module for you.  \n\nThere are two modules:  \n- **NgxProgressModule** (manage progress bar by yourself)  \n- **NgxProgressHttpModule** (import progress bar and intercept http requests)\n\n*****************************************************\n\n**Warning**: to use http module import that in your app.module.ts, then import NgxProgressModule where you want to use progress bar.\n\n*****************************************************\n\n```\nimport { NgxProgressHttpModule } from '@kken94/ngx-progress';\n\n@NgModule({\n  declarations: [AppComponent],\n  imports: [\n    ...\n    NgxProgressHttpModule,\n    ...\n  ],\n  bootstrap: [AppComponent],\n})\nexport class AppModule {}\n```\nand place it into the element you want to cover.  \n\n**Note:** If you want to use overlay be sure that the parent element has position:relative\nOverlay works with ```position:absolute```, ```top:0```, ```left:0```\n```\n\u003cdiv style=\"position: relative\"\u003e\n  \u003cngx-progress\u003e\u003c/ngx-progress\u003e\n  \u003ctable\u003e\u003c/table\u003e\n\u003c/div\u003e\n```\n\n## Features\n\n- NgxProgress supports multiple requests. If during the bar progress another request is fired, bar will not reset and keep going until all requests are completed.  \n- NgxProgress can be instantiated multiple times. Only the deepest one will be displayed\n\n#### Requests filtering\n\nYou can filter the HTTP requests that would like to be avoided by the interceptor by providing an array of regex patterns:\n```\n  import { NgxProgressHttpModule } from '@kken94/ngx-progress';\n  \n  @NgModule({\n    declarations: [AppComponent],\n    imports: [\n      ...\n      NgxProgressHttpModule.forRoot(['auth', '[a-zA-Z]']),\n      ...\n    ],\n    bootstrap: [AppComponent],\n  })\n  export class AppModule {}\n```\n\n## Configuration\n\n### Customization\n\n| Input                  | Description        | Default value   |\n| ---------------------- | ------------------ | --------------- |\n| ```color```            |                    | ```#0984e3```   |\n| ```showSpinner```      |                    | ```true```      |\n| ```showBar```          |                    | ```true```      |\n| ```indeterminate```    | Indeterminate style like Material                   | ```false```      |\n| ```barHeight```        |                    | ```1px```       |\n| ```spinnerDiameter```  |                    | ```10px```      |\n| ```initialValue```     | From 1 to 100      | ```undefined``` |\n| ```overlay```          | Show overlay that prevent user click | ```true```      |\n| ```overlayValue```     | From 0 to 1        | ```1```         |\n| ```spinnerSpeed```     | From 1 to 10       | ```4```         |\n\n\n### Emitters  \n\nNgxProgress provides also some emitters.  \nYou have to inject ```NgxProgressService``` and subscribe ```end$``` or ```start$```\n\n### Manually show and hide progress\n\nIn ```NgxProgressService``` there are four methods:  \n- ```start()```: start bar if no request is in progress or add new request to queue of the bar already shown\n- ```end()```: complete the bar if all requests are finished\n- ```reset()```: force bar to start from zero\n- ```terminate()```: force bar to terminate even if some requests are in progress\n\n### Enable and disable progress bar\n\nIn ```NgxProgressService```:  \n- ```enable()```: enable bars if it has been previously disabled \n- ```disable()```: disables all the bars that will not be shown until the next enabling \n\nand provide ```isEnabled``` variable to know if progress bar is enabled.  \nEnabled by default.\n\n## License\n\nThis project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details\n\n## Donate\n\nOffer me a coffee 😁\n\n[![donate](donate.png)](https://paypal.me/nicolataddei)\n","funding_links":["https://paypal.me/nicolataddei"],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkken94%2Fngx-progress","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkken94%2Fngx-progress","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkken94%2Fngx-progress/lists"}