ngx-signal-loading-bar

A lightweight, signal-based, zoneless loading bar for Angular 20. Tracks HTTP requests via HttpClient and provides a reactive progress bar component with standalone components and interceptors.

---

Features

• Fully signal-based: automatic updates with Angular 20 signals
• Standalone: no NgModule required
• Zoneless: works in applications using provideZonelessChangeDetection()
• HTTP interceptor automatically tracks requests
• Configurable height, color, timeout, and retry behavior
• Supports multiple concurrent HTTP requests

---

Installation

npm install ngx-signal-loading-bar

Angular 16.1 or later (with signal support) is required.

---

Setup

1. Provide the service and interceptor

In your app.config.ts:

import {
  ApplicationConfig,
  provideBrowserGlobalErrorListeners,
  provideZonelessChangeDetection,
} from '@angular/core';
import {
  provideHttpClient,
  withFetch,
  withInterceptors,
} from '@angular/common/http';
import { loadingInterceptor, provideLoadingBar } from 'ngx-signal-loading-bar';

export const appConfig: ApplicationConfig = {
  providers: [
    provideLoadingBar({ maxRetryCount: 3, timeoutMS: 15_000 }),
    provideBrowserGlobalErrorListeners(),
    provideZonelessChangeDetection(),
    provideHttpClient(withFetch(), withInterceptors([loadingInterceptor])),
  ],
};

• maxRetryCount → maximum number of retries to treat failed requests as a single loader
• timeoutMS → timeout before the loader automatically completes

---

2. Add the component to your template

<ngx-signal-loading-bar [barHeight]="2" [barColor]="'#f11653'"></ngx-signal-loading-bar>

• barHeight — height of the loader in pixels
• barColor — CSS color for the loader

---

3. Example component usage

import { HttpClient } from '@angular/common/http';
import { Component, inject } from '@angular/core';
import { NgxSignalLoadingBar } from 'ngx-signal-loading-bar';
import { concatMap, forkJoin, retry, timer } from 'rxjs';

@Component({
  selector: 'app-root',
  imports: [NgxSignalLoadingBar],
  templateUrl: './app.html',
  styleUrl: './app.scss',
})
export class App {
  readonly #http = inject(HttpClient);

  makeRequest(): void {
    // Example HTTP request to test loading bar
    this.#http
      .get('https://jsonplaceholder.typicode.com/todos/1')
      .subscribe(console.log);
  }

  makeMultipleSimultaneousRequests(): void {
    // Example HTTP request to test loading bar with multiple simultaneous requests
    forkJoin([
      this.#http.get('https://jsonplaceholder.typicode.com/todos/1'),
      this.#http.get('https://jsonplaceholder.typicode.com/todos/2'),
    ]).subscribe(console.log);
  }

  makeMultipleSequentialRequests(): void {
    // Example HTTP request to test loading bar with multiple sequential requests
    this.#http
      .get('https://jsonplaceholder.typicode.com/todos/1')
      .pipe(
        concatMap((response1) => {
          console.log(response1);
          return this.#http.get('https://jsonplaceholder.typicode.com/todos/2');
        })
      )
      .subscribe(console.log);
  }

  makeInvalidRequestToTestRetry(): void {
    // Example invalid HTTP request to test loading bar with error to test retry
    this.#http
      .get('https://httpstat.us/500')
      .pipe(
        retry({
          // Count should match config maxRetryCount
          count: 3,
          delay: (error, retryCount) => {
            // Exponential backoff: 1s, 2s, 4s ...
            const backoffTime = 1000 * Math.pow(2, retryCount - 1);
            console.error(error);
            console.log(`Retry #${retryCount} in ${backoffTime}ms`);
            return timer(backoffTime);
          },
        })
      )
      .subscribe(console.log);
  }
}

---

4. Ignore specific requests

import { HttpContext } from "@angular/common/http";
import { IGNORE_SIGNAL_LOADING_BAR } from "ngx-signal-loading-bar";

this.http.get("https://example.com/api", {
  context: new HttpContext().set(IGNORE_SIGNAL_LOADING_BAR, true),
});

Requests with IGNORE_SIGNAL_LOADING_BAR will not trigger the loading bar.

---

API

Component: NgxSignalLoadingBar

Input	Type	Default	Description
barHeight	number	2	Height of the loader in pixels
barColor	string	#f637e3	CSS color of the loader

Service: LoadingBar

• startLoading() → manually start the loader
• completeLoading() → manually complete the loader
• incrementRetryCount() → increase retry count for failed requests
• Signals: isLoading, currentProgress

Config: LoadingBarConfig

Property	Type	Default	Description
maxRetryCount	number	0	Maximum retries before loader treats failures as single request
timeoutMS	number	30000	Timeout in milliseconds before loader auto-completes

Interceptor: loadingInterceptor

• Tracks all outgoing HTTP requests automatically.
• Add to provideHttpClient(withInterceptors([loadingInterceptor])).

---

Dynamic Gradient & Box-Shadow

• The loader automatically applies a linear gradient based on the barColor input.
• Box-shadow dynamically updates to match barColor.
• Width updates automatically with HTTP requests.
• Height is controlled via [barHeight].

---

License

MIT © Kenneth Schlappkohl