ngx-progressbar

Slim progress bar for Angular — shows a loading indicator at the top of the page, inspired by YouTube and GitHub.

ngx-progressbar

Angular

Slim progress bar for Angular — shows a loading indicator at the top of the page, inspired by YouTube and GitHub.

npm GitHub Docs

Fit

Bundle (gzip)

3.1 kB

15.2 kB raw

Install size includes transitive dependencies. Bundle size is gzipped browser payload.

Freshness

The Problem

Showing a top progress bar during route navigations and HTTP requests in Angular requires interceptors, router event subscriptions, and careful start/stop coordination to avoid visual glitches.

What It Does

ngx-progressbar provides a <ng-progress> component that animates smoothly across the top of the page. It integrates automatically with Angular's router and HttpClient via NgProgressRouter and NgProgressHttp modules, so it starts and stops with zero manual wiring.

Installation

bash

npm install ngx-progressbar

Usage Example

typescript

import { NgProgressModule } from 'ngx-progressbar';
import { NgProgressRouterModule } from 'ngx-progressbar/router';

@NgModule({
  imports: [
    NgProgressModule.withConfig({ color: '#29d', thick: true }),
    NgProgressRouterModule, // auto-starts on route changes
  ],
})
export class AppModule {}

html

<!-- In your root component template -->
<ng-progress></ng-progress>
<router-outlet></router-outlet>

Related packages

@angular/cdkAngular

Angular Component Dev Kit — a set of behavior primitives for building accessible, high-quality UI components without prescribing any visual style.

@angular/materialAngular

Official Material Design component library for Angular — 30+ accessible, themeable UI components built for Angular's ecosystem.

@ng-bootstrap/ng-bootstrapAngular

Angular widgets built from scratch using Bootstrap CSS — no jQuery, no Popper.js, just pure Angular components.

ng-zorro-antdAngular

Enterprise-grade UI component library for Angular based on Ant Design — 60+ production-ready components with a polished design system.

@ngneat/until-destroyAngular

Automatic RxJS subscription cleanup for Angular components — no more manual unsubscribe logic in ngOnDestroy.