⏳ ngx-spinner-loading

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>

📄 License

MIT © 2025 Thalsi