⏳ ngx-spinner-loading

July 1, 2025 · View on GitHub

A lightweight, customizable Angular loading spinner package that supports global, section-based, inline loaders, and automatic HTTP integration via interceptors. Built with Angular standalone components and signal-based state.

🚀 Features

✅ Fullscreen, section-based, and inline loading modes
✅ Auto show/hide during HTTP requests via Angular interceptor
✅ Manual loader control using NgxSpinnerLoadingService
✅ Customizable: size, color, animation type, speed, timeout
✅ Use your own templates (type="custom")
✅ Lightweight, fast, no external dependencies
✅ Compatible with Angular 15+ standalone APIs

📦 Installation

npm install ngx-spinner-loading

🧩 Usage

1. Import Loader in Your App

import { NgxSpinnerLoadingInterceptor } from 'ngx-spinner-loading';

bootstrapApplication(AppComponent, {
  providers: [
    provideHttpClient(withInterceptors([NgxSpinnerLoadingInterceptor]))
  ]
});

2. Add Global Loader in Template

<ngx-spinner-loader
  type="spinner"
  size="md"
  color="#3498db"
  mode="fullscreen"
  [timeout]="5000"
></ngx-spinner-loader>

import { Component } from '@angular/core';
import { NgxSpinnerLoaderComponent } from 'ngx-spinner-loading';

@Component({
  selector: 'app-root',
  imports: [NgxSpinnerLoaderComponent],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent { }

⚙️ Inputs – Customization

Input	Type	Default	Description
`type`	`'spinner' \| 'bar' \| 'dots' \| 'circle' \| 'custom'`	`'spinner'`	Loader animation type
`size`	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'`	`'md'`	Preset sizes for loader
`color`	`string`	`#3498db`	Loader color (hex or CSS value)
`mode`	`'fullscreen' \| 'section' \| 'inline'`	`'fullscreen'`	Loader positioning
`timeout`	`number`	`undefined`	Auto-hide loader after milliseconds
`speed`	`number`	`1`	Animation speed multiplier
`manual`	`boolean`	`false`	If true, always visible unless hidden manually
`zIndex`	`number`	`9999`	z-index control for layering
`template`	`<ng-template>`	`undefined`	Provide custom loader when `type="custom"`

🧪 Example (Manual Control)

<ngx-spinner-loader [manual]="true" type="bar" color="green"></ngx-spinner-loader>

import { Component } from '@angular/core';
import { NgxSpinnerLoaderComponent, NgxSpinnerLoadingService } from 'ngx-spinner-loading';

@Component({
  selector: 'app-root',
  imports: [NgxSpinnerLoaderComponent],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent { 
  constructor(private loading: NgxSpinnerLoadingService) {}

  startLoad() {
    this.loading.show();
    setTimeout(() => this.loading.hide(), 3000);
  }
}

🔁 Auto HTTP Loading

Use the provided HTTP interceptor to automatically show/hide loader for all requests:

import { provideHttpClient, withInterceptors } from '@angular/common/http';
import { NgxSpinnerLoadingInterceptor } from 'ngx-spinner-loading';

bootstrapApplication(AppComponent, {
  providers: [
    provideHttpClient(withInterceptors([NgxSpinnerLoadingInterceptor]))
  ]
});

🧩 Section Loader Directive (Optional)

<div *ngxSpinnerLoading="isLoading">Dashboard Content...</div>

 private isLoading:boolean=false;

constructor(private loading: NgxSpinnerLoadingService) {}

loadData() {
  this.isLoading = true;
  this.http.get(...).subscribe(() => this.isLoading = false);
}

💡 Custom Template Example

<ngx-spinner-loader type="custom">
  <ng-template>
    <div class="my-loader">⏳ Please wait...</div>
  </ng-template>
</ngx-spinner-loader>