# @ngx-loading-bar/router

> Automatic page loading / progress bar for Angular

Latest version **7.0.1** (published 2025-12-07) · MIT license · 0 weekly downloads

## Install

```sh
npm install @ngx-loading-bar/router
pnpm add @ngx-loading-bar/router
yarn add @ngx-loading-bar/router
bun add @ngx-loading-bar/router
```

## Health

**Score 55/100 (C)** — status: stable.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 7.0.1 |
| Published | 2025-12-07 |
| First published | 2017-08-28 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 19.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 787 |
| Maintainers | aitboudad |
| Keywords | angular, angular2, ng, ng2, loading, loadingbar, progress, progressbar |

## Links

- npm: https://www.npmjs.com/package/@ngx-loading-bar/router
- Repository: https://github.com/aitboudad/ngx-loading-bar
- Homepage: https://github.com/aitboudad/ngx-loading-bar#readme
- Issues: https://github.com/aitboudad/ngx-loading-bar/issues
- npm.io page: https://npm.io/package/@ngx-loading-bar/router

## Dependencies (1)

- [tslib](https://npm.io/package/tslib.md) ^2.0.0

## Alternatives

- [angular-pipes](https://npm.io/package/angular-pipes.md) — 5.6K weekly downloads
- [@ng-web-apis/midi](https://npm.io/package/@ng-web-apis/midi.md) — 2.6K weekly downloads
- [happn-3](https://npm.io/package/happn-3.md) — 1.6K weekly downloads
- [@opensip-cli/lang-go](https://npm.io/package/@opensip-cli/lang-go.md) — 1.2K weekly downloads
- [mongoose-typescript](https://npm.io/package/mongoose-typescript.md) — 85 weekly downloads

## Recent versions

- 7.0.1 (latest) — 2025-12-07
- 5.0.0-alpha.2 (next) — 2020-05-13
- 7.0.0 — 2024-10-13
- 6.0.2 — 2022-02-16
- 6.0.1 — 2022-01-13
- 6.0.0 — 2021-12-23
- 5.1.2 — 2021-04-11
- 5.1.1 — 2020-12-05
- 5.1.0 — 2020-07-11
- 5.0.2 — 2020-07-01
- 5.0.1 — 2020-06-26
- 5.0.0 — 2020-06-20
- 5.0.0-alpha.1 — 2020-02-27
- 5.0.0-alpha.0 — 2019-11-28
- 4.2.0 — 2019-02-28
- … 45 more at https://npm.io/package/@ngx-loading-bar/router/versions

## README

# @ngx-loading-bar/router

A fully automatic loading bar with zero configuration for angular app (http, http-client and router).

#### 1. Install @ngx-loading-bar/router

```bash
  npm install @ngx-loading-bar/router --save
```

#### 2. Import the `LoadingBarRouterModule`:

```ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule } from '@angular/router';
import { LoadingBarRouterModule } from '@ngx-loading-bar/router';
import { AppComponent } from './app';

@NgModule({
  imports: [
    BrowserModule,
    RouterModule.forRoot(...),

    LoadingBarRouterModule,
  ],
  declarations: [ AppComponent ],
  bootstrap: [ AppComponent ],
})
export class AppModule {
}

```

#### 3. Include `ngx-loading-bar` in your app component:

```ts
import { Component } from '@angular/core';

@Component({
  selector: 'app',
  template: `
    ...
    <ngx-loading-bar></ngx-loading-bar>
  `,
})
export class AppComponent {}
```

## Related packages

- [@ngx-loading-bar/http-client](./../../packages/http-client/README.md) - Display the progress of your `@angular/common/http` requests.
- [@ngx-loading-bar/http](./../../packages/http/README.md) - Display the progress of your `@angular/http` requests.
- [@ngx-loading-bar/core](./../../packages/core/README.md) - Core module to manage the progress bar manually.

---
_Source: https://npm.io/package/@ngx-loading-bar/router · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._