{"id":13495790,"url":"https://github.com/mpalourdio/ng-http-loader","last_synced_at":"2025-11-21T00:06:05.098Z","repository":{"id":20165758,"uuid":"88260835","full_name":"mpalourdio/ng-http-loader","owner":"mpalourdio","description":":dango: Smart angular HTTP interceptor - Intercepts automagically HTTP requests and shows a spinkit spinner / loader / progress bar","archived":false,"fork":false,"pushed_at":"2025-05-13T06:14:05.000Z","size":5544,"stargazers_count":350,"open_issues_count":0,"forks_count":65,"subscribers_count":13,"default_branch":"main","last_synced_at":"2025-05-14T19:08:18.767Z","etag":null,"topics":["angular","angular2","http","http-interceptor","interceptor","loader","ng-http-loader","progress-bar","spinkit","spinkit-components","spinner"],"latest_commit_sha":null,"homepage":"","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/mpalourdio.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","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,"zenodo":null},"funding":{"github":"mpalourdio"}},"created_at":"2017-04-14T11:04:12.000Z","updated_at":"2025-05-13T06:12:57.000Z","dependencies_parsed_at":"2023-11-13T09:29:28.893Z","dependency_job_id":"d13b8550-4d27-47fa-a34e-31b6e42187e2","html_url":"https://github.com/mpalourdio/ng-http-loader","commit_stats":{"total_commits":862,"total_committers":7,"mean_commits":"123.14285714285714","dds":0.0139211136890951,"last_synced_commit":"e3af414d265c3fa9a16cd65b4d0fa12e0b49c47e"},"previous_names":[],"tags_count":74,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mpalourdio%2Fng-http-loader","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mpalourdio%2Fng-http-loader/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mpalourdio%2Fng-http-loader/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mpalourdio%2Fng-http-loader/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mpalourdio","download_url":"https://codeload.github.com/mpalourdio/ng-http-loader/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254209859,"owners_count":22032897,"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","http","http-interceptor","interceptor","loader","ng-http-loader","progress-bar","spinkit","spinkit-components","spinner"],"created_at":"2024-07-31T19:01:38.259Z","updated_at":"2025-11-21T00:06:05.092Z","avatar_url":"https://github.com/mpalourdio.png","language":"TypeScript","funding_links":["https://github.com/sponsors/mpalourdio"],"categories":["Uncategorized","Architecture and Advanced Topics","TypeScript"],"sub_categories":["Uncategorized","HTTP"],"readme":"# ng-http-loader\n\n[![CI](https://github.com/mpalourdio/ng-http-loader/actions/workflows/main.yml/badge.svg)](https://github.com/mpalourdio/ng-http-loader/actions/workflows/main.yml)\n[![Coverage Status](https://coveralls.io/repos/github/mpalourdio/ng-http-loader/badge.svg?branch=main)](https://coveralls.io/github/mpalourdio/ng-http-loader?branch=main)\n[![npm](https://img.shields.io/npm/v/ng-http-loader.svg)](https://www.npmjs.com/package/ng-http-loader)\n[![npm](https://img.shields.io/npm/dm/ng-http-loader.svg)](https://www.npmjs.com/package/ng-http-loader)\n[![npm](https://img.shields.io/npm/dt/ng-http-loader.svg)](https://www.npmjs.com/package/ng-http-loader)\n\n## Changelog\n\n[Please read the changelog](CHANGELOG.md)\n\n## Contributing\n\nUse the fork, Luke. PR without tests will likely not be merged.\n\n## Installation\n\nTo install this library, run:\n\n```bash\n$ npm install ng-http-loader --save / yarn add ng-http-loader\n```\n\n## What does it do ?\n\nThis package provides an HTTP Interceptor, and some spinner components (All from [SpinKit](https://github.com/tobiasahlin/SpinKit) at the moment).\nThe HTTP interceptor listens to all HTTP requests and shows a spinner / loader indicator during pending HTTP requests.\n\n## Angular Compatibility\n\n| ng-http-loader | Angular |\n|----------------|---------|\n| \u003e=0.1.0 \u003c0.4.0 | ^4.3.0  |\n| \u003e=0.4.0 \u003c1.0.0 | ^5.0.0  |\n| \u003e=1.0.0 \u003c3.2.0 | ^6.0.0  |\n| \u003e=3.2.0 \u003c5.1.0 | ^7.0.0  |\n| \u003e=6.0.0 \u003c7.0.0 | ^8.0.0  |\n| \u003e=7.0.0 \u003c8.0.0 | ^9.0.0  |\n| \u003e=8.0.0 \u003c9.0.0 | ^10.0.0 |\n| \u003e=9.0.0        | ^11.0.0 |\n| \u003e=10.0.0       | ^12.0.0 |\n| \u003e=11.0.0       | ^13.0.0 |\n| \u003e=12.0.0       | ^14.0.0 |\n| \u003e=13.0.0       | ^15.0.0 |\n| \u003e=14.0.0       | ^16.0.0 |\n| \u003e=15.0.0       | ^17.0.0 |\n| \u003e=16.0.0       | ^18.0.0 |\n| \u003e=17.0.0       | ^19.0.0 |\n| \u003e=18.0.0       | ^20.0.0 |\n| \u003e=19.0.0       | ^21.0.0 |\n\nIf you experience errors like below, **please double-check the version you use.**\n\n`ERROR in Error: Metadata version mismatch for module [...]/angular/node_modules/ng-http-loader/ng-http-loader.module.d.ts, found version x, expected y [...]`\n\n## Requirements - HttpClient\n\nPerforming HTTP requests with the `HttpClient` API is **mandatory**. Otherwise, the spinner will not be fired **at all**.\n\n## Usage\n\nFrom your Angular root component (`app.component.ts` for example):\n\n```typescript\n@Component({\n    selector: 'app-root',\n    standalone: true,\n    templateUrl: './app.component.html',\n    styleUrls: ['./app.component.scss'],\n    imports: [NgHttpLoaderComponent] \u003c====== import the component\n})\n```\n\nIn your `app.component.html`, simply add:\n```xml\n\u003cng-http-loader\u003e\u003c/ng-http-loader\u003e\n```\nAt last, configure your `ApplicationConfig` like following:\n\n```typescript\nimport { ApplicationConfig, importProvidersFrom } from '@angular/core';\nimport { provideRouter } from '@angular/router';\nimport { NgHttpLoaderModule } from 'ng-http-loader';\nimport { routes } from './app.routes';\nimport { provideHttpClient, withInterceptors } from '@angular/common/http';\nimport { pendingRequestsInterceptor$ } from 'ng-http-loader';\n\nexport const appConfig: ApplicationConfig = {\n    providers: [\n        provideRouter(routes),\n        provideHttpClient(withInterceptors([pendingRequestsInterceptor$])),\n    ],\n};\n```\n## Usage in a non-standalone Angular application\n\n- Import `NgHttpLoaderComponent` in your main module `imports` array.\n- Add the following to your module providers:\n```typescript\nproviders: [\n    provideHttpClient(withInterceptors([pendingRequestsInterceptor$])),\n]\n````\n## Customizing the spinner\n\nYou can customize the following parameters:\n  - The spinner **backdrop** (visible by default).\n  - The **background-color** (ie. the color of the spinner itself).\n  - The **debounce delay** (ie. after how many milliseconds the spinner will be visible, if needed).\n  - The **extra duration** (ie. how many extra milliseconds should the spinner be visible).\n  - The **minimum duration** (ie. how many milliseconds should the spinner be visible at least).\n  - The spinner **opacity**.\n  - The backdrop **background-color** (ie. the color of the spinner backdrop, if enabled).\n  - The **spinner type**.\n\n```xml\n\u003cng-http-loader \n    [backdrop]=\"false\"\n    [backgroundColor]=\"'#ff0000'\"\n    [debounceDelay]=\"100\"\n    [extraDuration]=\"300\"\n    [minDuration]=\"300\"\n    [opacity]=\".6\"\n    [backdropBackgroundColor]=\"'#777777'\"\n    [spinner]=\"spinkit.skWave\"\u003e\n\u003c/ng-http-loader\u003e\n```\n\n**_To specify the spinner type this way, you must reference the `Spinkit` const as a public property in your app.component.ts_**:\n\n```typescript\nimport { Component } from '@angular/core'; \nimport { Spinkit } from 'ng-http-loader'; // \u003c============\n\n@Component({\n    selector: 'app-root',\n    standalone: true,\n    templateUrl: './app.component.html',\n    styleUrls: ['./app.component.css'],\n    imports: [NgHttpLoaderComponent]\n})\nexport class AppComponent {\n    public spinkit = Spinkit; // \u003c============\n}\n```\nThe different spinners available are referenced in [this file](src/lib/spinkits.ts).\n\n\n**_Otherwise, you can reference the spinner type as a simple string_**:\n\n```xml\n\u003cng-http-loader spinner=\"sk-wave\"\u003e\u003c/ng-http-loader\u003e\n```\n\n## Defining your own spinner\n\nYou can define your own spinner component in place of the built-in ones. The needed steps are:\n\n- Create your component\n- Reference your component as a public property in your `app.component.ts`\n- Reference the predefined property in the ng-http-loader `entryComponent` component selector like this:\n```typescript\nimport { Component } from '@angular/core';\nimport { AwesomeComponent } from 'my.awesome.component';\n\n@Component({\n    selector: 'app-root',\n    standalone: true,\n    templateUrl: './app.component.html',\n    styleUrls: ['./app.component.css'],\n    imports: [NgHttpLoaderComponent]\n})\nexport class AppComponent {\n    public awesomeComponent = AwesomeComponent;\n}\n```\n```xml\n\u003cng-http-loader [entryComponent]=\"awesomeComponent\"\u003e\u003c/ng-http-loader\u003e\n```\n\nYou can find some examples [here](https://gist.github.com/mpalourdio/2c0bec03d610b24ff49db649fbb69a48) and [here](https://gist.github.com/mpalourdio/e05b4495de2abeeecfcf92d70e4ef93e).\n\n## Requests filtering by URL, HTTP method or HTTP headers\n\nYou can filter the HTTP requests that shouldn't be caught by the interceptor by providing **an array of regex patterns**:\n```xml\n\u003cng-http-loader [filteredUrlPatterns]=\"['\\\\d', '[a-zA-Z]', 'my-api']\"\u003e\u003c/ng-http-loader\u003e\n```\n\nYou can filter the HTTP requests by providing **an array of HTTP methods** (case insensitive):\n```xml\n\u003cng-http-loader [filteredMethods]=\"['gEt', 'POST', 'PuT']\"\u003e\u003c/ng-http-loader\u003e\n```\n\nYou can also filter the HTTP requests by providing **an array of HTTP headers** (case insensitive):\n```xml\n\u003cng-http-loader [filteredHeaders]=\"['hEaDeR', 'AnoTheR-HeAdEr']\"\u003e\u003c/ng-http-loader\u003e\n```\n\n## Manually show and hide the spinner\n\nYou can manually show and hide the spinner if needed. You must use the `SpinnerVisibilityService` for this purpose.  \n\nSometimes, when manually showing the spinner, an HTTP request could be performed in background, and when finished, the spinner would automagically disappear.  \n\n**For this reason, when calling `SpinnerVisibilityService#show()`, it prevents the HTTP interceptor from being triggered unless you explicitly call `SpinnerVisibilityService#hide()`.**\n\n```typescript\nimport { Component } from '@angular/core'; \nimport { SpinnerVisibilityService } from 'ng-http-loader';\n\n@Component({\n    selector: 'my-component',\n    templateUrl: './my.component.html',\n    styleUrls: ['./my.component.css'],\n})\nexport class MyComponent {\n\n    constructor(private spinner: SpinnerVisibilityService) {\n        // show the spinner\n        spinner.show();\n        //////////////\n        // HTTP requests performed between show \u0026\u0026 hide won't have any side effect on the spinner.\n        /////////////\n        // hide the spinner\n        spinner.hide();\n    }\n}\n```\n\n## Internet explorer or Safari problem ?\n\nJust use a [real browser](https://download.mozilla.org).\n\n## Misc\n\nEach Spinkit component defined in [SPINKIT_COMPONENTS](src/lib/spinkits.ts#L30) can be used individually.\n\n## Credits\n\n[Tobias Ahlin](https://github.com/tobiasahlin), the awesome creator of [SpinKit](https://github.com/tobiasahlin/SpinKit).  \n[David Herges](https://github.com/dherges), the awesome developer of [ng-packagr](https://github.com/dherges/ng-packagr).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmpalourdio%2Fng-http-loader","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmpalourdio%2Fng-http-loader","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmpalourdio%2Fng-http-loader/lists"}