ngx-spinner

Highly configurable loading spinner overlay for Angular — 50+ animation types, full-screen or component-level, with service-driven control.

ngx-spinner

Angular

Highly configurable loading spinner overlay for Angular — 50+ animation types, full-screen or component-level, with service-driven control.

npm GitHub Docs

Fit

Bundle (gzip)

8.3 kB

27.4 kB raw

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

Freshness

The Problem

Adding a loading overlay to an Angular app requires building a dismissible overlay component, a shared service, and wiring it to async operations — all for something that appears in nearly every production app.

What It Does

NgxSpinnerService exposes show() and hide() methods you call before and after async operations. The <ngx-spinner> component renders the overlay with your chosen animation type and color. Multiple named spinners allow independent loading states on the same page.

Installation

bash

npm install ngx-spinner

Usage Example

typescript

import { NgxSpinnerModule, NgxSpinnerService } from 'ngx-spinner';

@NgModule({ imports: [NgxSpinnerModule] })
export class AppModule {}

@Component({ template: `<ngx-spinner type="ball-spin" color="#fff"></ngx-spinner>` })
export class DataComponent {
  constructor(private spinner: NgxSpinnerService, private api: ApiService) {}

  async loadData() {
    this.spinner.show();
    try {
      this.data = await this.api.fetch();
    } finally {
      this.spinner.hide();
    }
  }
}

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.