{"id":13497364,"url":"https://github.com/aitboudad/ngx-loading-bar","last_synced_at":"2025-05-14T14:08:28.946Z","repository":{"id":14325808,"uuid":"76349395","full_name":"aitboudad/ngx-loading-bar","owner":"aitboudad","description":"Automatic page loading / progress bar for Angular","archived":false,"fork":false,"pushed_at":"2024-10-13T13:59:12.000Z","size":4661,"stargazers_count":782,"open_issues_count":4,"forks_count":83,"subscribers_count":13,"default_branch":"main","last_synced_at":"2025-04-28T14:00:52.902Z","etag":null,"topics":["angular","loading-bar","progress-bar"],"latest_commit_sha":null,"homepage":"https://aitboudad.github.io/ngx-loading-bar","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/aitboudad.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-12-13T10:39:39.000Z","updated_at":"2025-04-09T14:00:09.000Z","dependencies_parsed_at":"2024-05-04T20:42:42.602Z","dependency_job_id":"c862a79f-1e7c-491e-ae37-51e00ff560f8","html_url":"https://github.com/aitboudad/ngx-loading-bar","commit_stats":{"total_commits":159,"total_committers":10,"mean_commits":15.9,"dds":0.0691823899371069,"last_synced_commit":"1859d4ec5e766ab56462ae6f6fecc609c3e89a2f"},"previous_names":["aitboudad/ng-loading-bar"],"tags_count":45,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aitboudad%2Fngx-loading-bar","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aitboudad%2Fngx-loading-bar/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aitboudad%2Fngx-loading-bar/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aitboudad%2Fngx-loading-bar/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/aitboudad","download_url":"https://codeload.github.com/aitboudad/ngx-loading-bar/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253822983,"owners_count":21969836,"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","loading-bar","progress-bar"],"created_at":"2024-07-31T20:00:29.790Z","updated_at":"2025-05-14T14:08:28.926Z","avatar_url":"https://github.com/aitboudad.png","language":"TypeScript","funding_links":[],"categories":["Uncategorized","TypeScript","Third Party Components","Dependencies"],"sub_categories":["Uncategorized","Loaders","UI"],"readme":"\u003cdiv align=\"center\"\u003e\n  \u003ch2\u003e@ngx-loading-bar\u003c/h2\u003e\n  \u003cbr /\u003e\n  A fully automatic loading bar with zero configuration for Angular app (http, http-client and router).\n  \u003cbr /\u003e\u003cbr /\u003e\n\n[![Npm version](https://badge.fury.io/js/%40ngx-loading-bar%2Fcore.svg)](https://npmjs.org/package/@ngx-loading-bar/core)\n[![Downloads](https://img.shields.io/npm/dm/@ngx-loading-bar/core.svg)](https://npmjs.org/package/@ngx-loading-bar/core)\n[![Build Status](https://api.travis-ci.org/aitboudad/ngx-loading-bar.svg?branch=main)](https://api.travis-ci.org/aitboudad/ngx-loading-bar.svg?branch=master)\n\n\u003c/div\u003e\n\n---\n\n## Packages\n\n- [@ngx-loading-bar/router](./packages/router/README.md) - Display loading bar when navigating between routes.\n- [@ngx-loading-bar/http-client](./packages/http-client/README.md) - Display the progress of your `@angular/common/http` requests.\n- [@ngx-loading-bar/core](./packages/core/README.md) - Core module to manage the progress bar manually.\n\n## Demo\n\n- https://aitboudad.github.io/ngx-loading-bar/\n\n# Table of contents\n\n- [Getting started](#getting-started)\n  - [1. Install @ngx-loading-bar](#1-install-ngx-loading-bar)\n  - [2. Import the installed libraries](#2-import-the-installed-libraries)\n  - [3. Include `ngx-loading-bar` in your app component](#3-include-ngx-loading-bar-in-your-app-component)\n- [Global config](#global-config)\n- [Ignoring particular requests](#ignoring-particular-requests)\n- [Manage multi loading bars separately](#manage-multi-Loading-bars-separately)\n- [Manually manage loading service](#manually-manage-loading-service)\n- [Integration with Material Progress bar](#integration-with-material-progress-bar)\n- [Credits](#credits)\n\n## Getting started\n\n#### 1. Install @ngx-loading-bar:\n\n```bash\n  # if you use `@angular/common/http`\n  npm install @ngx-loading-bar/core @ngx-loading-bar/http-client --save\n\n  # if you use `@angular/router`\n  npm install @ngx-loading-bar/core @ngx-loading-bar/router --save\n\n  # to manage loading-bar manually\n  npm install @ngx-loading-bar/core --save\n```\n\n**Which Version to use?**\n\n| Angular version | @ngx-loading-bar/core |\n| --------------- | --------------------- |\n| \u003e=16.0          | 7.x                   |\n| \u003e=13.0          | 6.x                   |\n| \u003e=9.0           | 5.x                   |\n| \u003e=7.0           | 4.x                   |\n\n#### 2. Import the installed libraries:\n\n```ts\n// app.config.ts\nimport { ApplicationConfig, importProvidersFrom } from '@angular/core';\n\n// for HttpClient import:\nimport { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';\nimport { provideLoadingBarInterceptor } from '@ngx-loading-bar/http-client';\n\n// for Router import:\nimport { provideLoadingBarRouter } from '@ngx-loading-bar/router';\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    // for HttpClient use:\n    provideHttpClient(withInterceptorsFromDi()),\n    provideLoadingBarInterceptor(),\n\n    // for Router use:\n    provideLoadingBarRouter(),\n  ],\n};\n```\n\n#### 3. use `ngx-loading-bar` in your app component:\n\n```ts\nimport { Component } from '@angular/core';\nimport { NgxLoadingBar } from '@ngx-loading-bar/core';\n\n@Component({\n  selector: 'app',\n  imports: [NgxLoadingBar],\n  standalone: true,\n  template: `\n    ...\n    \u003cngx-loading-bar\u003e\u003c/ngx-loading-bar\u003e\n  `,\n})\nexport class AppComponent {}\n```\n\n##### Customize `ngx-loading-bar`\n\nYou can pass the following inputs to customize the view:\n\n| Input          | Description                                                                              |\n| -------------- | ---------------------------------------------------------------------------------------- |\n| color          | The color of loading bar. Default value is `#29d`.                                       |\n| includeSpinner | Hide or show the Spinner. Default value is `true`.                                       |\n| includeBar     | Hide or show the Bar. Default value is `true`.                                           |\n| height         | The height of loading bar. Default value is `2px`.                                       |\n| diameter       | The diameter of the progress spinner. Default value is `14px`.                           |\n| fixed          | set loading bar on the top of the screen or inside a container. Default value is `true`. |\n| value          | Set the value of the progress bar.                                                       |\n| ref            | Select the ref of a loading bar instance to display (`http`, `router`, ...)              |\n\n## Global config\n\nThe global config can be adjusted using `provideLoadingBar` in the application's config.\n\n```ts\nimport { ApplicationConfig, importProvidersFrom } from '@angular/core';\nimport { provideLoadingBar } from '@ngx-loading-bar/core';\n\nexport const appConfig: ApplicationConfig = {\n  providers: [provideLoadingBar({ latencyThreshold: 100 })],\n};\n```\n\n| Option           | Description                                                                             |\n| ---------------- | --------------------------------------------------------------------------------------- |\n| latencyThreshold | The initial delay time to wait before displaying the loading bar. Default value is `0`. |\n\n## Ignoring particular requests\n\nThe loading bar can also be forced to ignore certain requests, for example, when long-polling or periodically sending debugging information back to the server.\n\n#### http-client:\n\n```ts\n// ignore a particular $http GET:\nhttpClient.get('/status', {\n  context: new HttpContext().set(NGX_LOADING_BAR_IGNORED, true),\n});\n```\n\n#### router:\n\n- using the `router.navigateByUrl()` method:\n\n```ts\nthis.router.navigateByUrl('/custom-path', {\n  state: { ignoreLoadingBar: true },\n});\n```\n\n- using the `routerLink` directive:\n\n```html\n\u003ca routerLink=\"/custom-path\" [state]=\"{ ignoreLoadingBar: true }\"\u003eGo\u003c/a\u003e\n```\n\n## Manage multi loading bars separately\n\nIn some case you may want to differentiate the reason why the loading bar is showing for example show the loading bar when an HttpClient request is being made, and a full page darkening overlay with a spinner when the router is routing to a new page in that case either use `ref` input or `LoadingBarService` to control a specific loading bar instance:\n\n- using `ref` input:\n\n```html\n\u003c!-- loading bar for router --\u003e\n\u003cngx-loading-bar ref=\"router\"\u003e\u003c/ngx-loading-bar\u003e\n\n\u003c!-- loading bar for http --\u003e\n\u003cngx-loading-bar ref=\"http\"\u003e\u003c/ngx-loading-bar\u003e\n```\n\n- using `LoadingBarService` service:\n\n```ts\n// select the router loader instance\nconst state = this.loader.useRef('router');\n\n// control state\nstate.start();\nstate.complete();\n\n// get the progress value\nconst value$ = state.value$;\n```\n\n## Manually manage loading service\n\n```ts\nimport { Component } from '@angular/core';\nimport { NgxLoadingBar, LoadingBarService } from '@ngx-loading-bar/core';\n\n@Component({\n  selector: 'app',\n  imports: [NgxLoadingBar],\n  standalone: true,\n  template: `\n    ...\n    \u003cngx-loading-bar\u003e\u003c/ngx-loading-bar\u003e\n    \u003cbutton (click)=\"loader.start()\"\u003estart\u003c/button\u003e\n    \u003cbutton (click)=\"loader.complete()\"\u003eComplete\u003c/button\u003e\n  `,\n})\nexport class App {\n  loader = this.loadingBar.useRef();\n  constructor(private loadingBar: LoadingBarService) {}\n}\n```\n\n## Integration with [Material Progress bar](https://material.angular.io/components/progress-bar/overview)\n\n```ts\nimport { Component } from '@angular/core';\nimport { LoadingBarService } from '@ngx-loading-bar/core';\n\n@Component({\n  selector: 'app',\n  template: `\n    ...\n    \u003cmat-progress-bar mode=\"determinate\" [value]=\"loader.value$ | async\"\u003e\u003c/mat-progress-bar\u003e\n  `,\n})\nexport class App {\n  constructor(public loader: LoadingBarService) {}\n}\n```\n\n## Lazy Loading modules\n\nIf you're using Lazy Loaded Modules in your app, please use LoadingBarRouterModule, because although a request is being fired in the nework console to fetch your lazy load module.js file, it won't trigger the LoadingBarHttpClientModule.\n\n# Credits\n\n- [angular-loading-bar](https://github.com/chieffancypants/angular-loading-bar)\n- https://github.com/sir-valentin/Angular2LoadingBar.git\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faitboudad%2Fngx-loading-bar","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Faitboudad%2Fngx-loading-bar","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faitboudad%2Fngx-loading-bar/lists"}