Skip to content

A workspace registry is a configuration that allows you to install, link, or test local npm packages/libraries within your project workspace without publishing them to the global npm registry.

License

Notifications You must be signed in to change notification settings

thalsi/ngx-spinner-loading

Repository files navigation

⏳ 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

About

A workspace registry is a configuration that allows you to install, link, or test local npm packages/libraries within your project workspace without publishing them to the global npm registry.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published