How to ignore certain HTTP requests in ngx-loading-bar?

Set the NGX_LOADING_BAR_IGNORED context in the HTTP request options. For example, use `httpClient.get('/status', { context: new HttpContext().set(NGX_LOADING_BAR_IGNORED, true) })` to exclude that request from triggering the loading bar, as shown in the README.

ngx-loading-bar vs Angular Material progress bar: which should I use?

ngx-loading-bar is better for automatic integration with HTTP and router events, while Material progress bar offers more styling options but requires manual control. ngx-loading-bar can integrate with Material for a hybrid approach, as detailed in the 'Integration with Material Progress bar' section.

How to customize the color and height of ngx-loading-bar?

Use input properties like [color] and [height] on the component. For instance, set [color]="'red'" and [height]="'4px'" in your template, with defaults documented in the input table under 'Customize ngx-loading-bar'.

Does ngx-loading-bar work with lazy loaded modules in Angular?

Yes, but you must use LoadingBarRouterModule for router events, as HTTP requests for lazy modules might not trigger the HTTP loading bar automatically. The README notes this under 'Lazy Loading modules' to avoid confusion.

How to manage multiple loading bars separately in an app?

Use the ref input or LoadingBarService with different refs. For example, define and , or use `this.loader.useRef('router')` in the service, as explained in 'Manage multi loading bars separately'.

Is ngx-loading-bar compatible with Angular 16 or newer?

Yes, but check the version compatibility table: for Angular >=16.0, use @ngx-loading-bar/core 7.x. Mismatching versions can lead to errors, so always verify the README guidelines during installation.

Open-Awesome

ngx-loading-bar

MITTypeScriptv7.0.1

A fully automatic loading bar with zero configuration for Angular apps, supporting HTTP, HttpClient, and router.

Visit Website GitHub

785 stars82 forks0 contributors

What is ngx-loading-bar?

@ngx-loading-bar is an Angular library that automatically displays a loading or progress bar during HTTP requests and route navigation. It solves the problem of providing visual feedback to users during asynchronous operations without requiring manual configuration for common use cases.

Target Audience

Angular developers building single-page applications who need to improve user experience with visual loading indicators during network requests and page transitions.

Value Proposition

Developers choose @ngx-loading-bar because it offers zero-configuration automation for common scenarios while providing full customization and manual control options, all within Angular's ecosystem without external dependencies.

Overview

Automatic page loading / progress bar for Angular

Use Cases

Best For

Adding automatic loading indicators to Angular HTTP requests
Showing progress during Angular router navigation
Customizing loading bar appearance (color, size, spinner)
Managing multiple independent loading bars in one app
Ignoring specific requests (e.g., polling) from triggering loading indicators
Integrating loading progress with Angular Material components

Not Ideal For

Projects using non-Angular frameworks like React or Vue.js
Applications relying on custom HTTP clients outside @angular/common/http (e.g., Axios or Fetch API directly)
Teams needing highly advanced, non-linear progress animations beyond basic color and size tweaks

Pros & Cons

Pros

Zero-Configuration Automation

Automatically displays loading bars for HTTP requests and router navigation without manual setup, as shown in the minimal 'Getting started' steps requiring just import and template inclusion.

Modular and Flexible

Offers separate packages for HTTP, router, and core manual control, allowing developers to pick only needed modules and optimize bundle size, as outlined in the 'Packages' section.

Easy Customization

Provides input properties to adjust color, height, spinner visibility, and positioning directly in the template, with defaults like color '#29d' and height '2px' that can be overridden.

Selective Request Ignoring

Supports ignoring specific requests like long-polling by setting context or state, preventing unnecessary visual feedback, as demonstrated in the 'Ignoring particular requests' examples.

Cons

Angular Version Lock-in

Requires matching specific versions with Angular, as per the compatibility table (e.g., core 7.x for Angular >=16.0), which can complicate upgrades and introduce dependency management headaches.

Limited Framework Support

Exclusively designed for Angular, making it unusable in projects with mixed frontend technologies or migrations away from Angular, reducing its versatility.

Multiple Package Setup

Needs separate installations and configurations for different modules (core, http-client, router), adding complexity compared to all-in-one loading indicator libraries.

Frequently Asked Questions

Related Projects

shimmer-from-structure

A structure-aware skeleton loader that mirrors your rendered UI at runtime. Zero layout duplication. Built for modern frameworks.

Stars1,061

Forks18

Last commit13 days ago

ngx-progressbar

Angular progress bar ☄

Stars1,053

Forks105

Last commit2 months ago

angular-svg-round-progressbar

Angular module that uses SVG to create a circular progressbar

Stars741

Forks176

Last commit8 months ago

Community-curated · Updated weekly · 100% open source

Found a gem we're missing?

Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.

Submit a project Star on GitHub