acy-spinner-21

Angular 21 için hafif, sinyal tabanlı, standalone spinner/loading paketi.
border, dots ve bars olmak üzere üç farklı animasyon tipini destekler; HTTP isteklerini otomatik olarak yakalar.

Kurulum

npm install acy-spinner-21

Hızlı Başlangıç

1. HTTP Interceptor ile Otomatik Kullanım

app.config.ts

import { ApplicationConfig } from '@angular/core';
import { provideHttpClient, withInterceptors } from '@angular/common/http';
import { spinnerInterceptor } from 'acy-spinner-21';

export const appConfig: ApplicationConfig = {
  providers: [
    provideHttpClient(withInterceptors([spinnerInterceptor])),
  ],
};

app.component.ts

import { Component } from '@angular/core';
import { SpinnerComponent } from 'acy-spinner-21';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [SpinnerComponent],
  template: `
    <acy-spinner />
    <router-outlet />
  `,
})
export class AppComponent {}

Artık her HTTP isteğinde spinner otomatik olarak gösterilir ve istek bitince gizlenir.

2. Manuel Kullanım

import { Component, inject } from '@angular/core';
import { SpinnerService, SpinnerComponent } from 'acy-spinner-21';

@Component({
  standalone: true,
  imports: [SpinnerComponent],
  template: `
    <acy-spinner />
    <button (click)="load()">Veriyi Yükle</button>
  `,
})
export class MyComponent {
  private spinner = inject(SpinnerService);

  async load() {
    this.spinner.show({ message: 'Yükleniyor...', type: 'dots' });
    try {
      await fetchData();
    } finally {
      this.spinner.hide();
    }
  }
}

Spinner Tipleri

| Tip | Açıklama | | -------- | ------------------------------- | | border | Dönen halka (varsayılan) | | dots | Zıplayan noktalar | | bars | Yükselen/alçalan çubuklar |

SpinnerConfig Seçenekleri

| Özellik | Tip | Varsayılan | Açıklama | | --------- | -------------- | ------------- | ------------------------------------- | | type | SpinnerType | 'border' | Animasyon tipi | | message | string | '' | Spinner altında gösterilecek metin | | overlay | boolean | true | Yarı şeffaf arka plan göster/gizle | | color | string | '#3f51b5' | Spinner rengi (herhangi bir CSS değeri) |

SpinnerService API

| Metot | Açıklama | | --------------- | ------------------------------------------------------- | | show(config?) | Spinner'ı göster; isteğe bağlı config ile özelleştir | | hide() | Sayacı bir azalt; sıfıra gelince spinner kaybolur | | forceHide() | Sayacı sıfırla, spinner'ı anında gizle | | isVisible | Signal<boolean> — template'de {{ spinner.isVisible() }} şeklinde kullanılır | | config | Signal<SpinnerConfig> — mevcut ayarları okur |

Komut Satırı — Derleme ve Yayınlama

# Bağımlılıkları kur
npm install

# Kütüphaneyi derle (dist/acy-spinner-21 klasörüne çıktı verir)
npm run build

# npm'e yayınla (öncesinde npm login gereklidir)
cd dist/acy-spinner-21
npm publish --access public

Lisans

MIT