ngx loader indicator

Indikator NGX Loader

Indikator NGX Loader adalah arahan terbaik untuk memiliki loader tanpa membungkus elemen Anda ke komponen tambahan

Anda juga dapat mencoba NGX Mask kami Periksa. Anda juga dapat mencoba NGX Copypaste kami Periksa.

Anda dapat mencoba demo langsung dengan contoh.

Menginstal

$ npm install --save ngx-loader-indicator

QuickStart jika versi NGX-Loader-Indicator> = 15.0.0

Perhatikan versi ini berfungsi untuk Angular> = 14.0.0

Konfigurasikan untuk aplikasi dengan provideEnvironmentNgxLoaderIndicator

 bootstrapApplication ( AppComponent , {
    providers : [
        provideAnimations ( ) ,
        provideEnvironmentNgxLoaderIndicator ( ) ,
        ( ... )
    ] ,
} ) . catch ( ( err ) => console . error ( err ) ) ;

atau konfigurasikan untuk fitur dengan provideNgxLoaderIndicator dan impor arahan mandiri NgxLoaderIndicatorDirective

@ Component ( {
    selector : 'my-feature' ,
    templateUrl : './my-feature.component.html' ,
    styleUrls : [ './my-feature.component.css' ] ,
    standalone : true ,
    imports : [ NgxLoaderIndicatorDirective , ( ... ) ] ,
    providers : [
        ( ... )
        provideNgxLoaderIndicator ( {
            img : 'https://avatars2.githubusercontent.com/u/32452610?s=200&v=4' ,
            loaderStyles : {
                background : 'rgba(255, 255, 255, 0.8)' ,
            } ,
            imgStyles : {
                width : '50px' ,
                background : 'yellow' ,
            } ,
            rotate : {
                duration : 5000 ,
            } ,
        } ) ,
    ] ,
} )
export class MyFeatureComponent { } 

QuickStart jika versi NGX-LOADER-INDICATOR <15.0.0

Perhatikan versi ini berfungsi untuk Angular <12.0.0

Impor modul dalam modul yang diperlukan.

 import { NgxLoaderIndicatorModule } from 'ngx-loader-indicator'

( ... )

@ NgModule ( {
  ( ... )
  imports : [
    NgxLoaderIndicatorModule . forRoot ( options )
  ]
  ( ... )
} )

Penggunaan

 < div [ngxLoaderIndicator] =" isLoading " > Content </ div > 

Contoh

 < form (ngSubmit) =" save(form.value) " [formGroup] =" form " [ngxLoaderIndicator] =" isLoading " >
    < h2 > Login </ h2 >
    < input matInput type =" email " placeholder =" Email " #email formControlName =" email " />
    < input matInput type =" password " placeholder =" Password " #name formControlName =" password " />
    < button mat-button [disabled] =" form.invalid " > Login </ button >
</ form > 

Opsi

Anda dapat menentukan opsi khusus Anda

kustom img (string) dan warna

  {
    img : string ,
    imgStyles : {
      width : string , // '30px'
      background : string , // 'yellow' or rgb(255, 255, 0)
    }
  }

Warna tata letak pembungkus khusus

  {
    loaderStyles : {
      background : string ,
    } ,
  }

Opsi animasi untuk rotasi gambar

    rotate: {
      delay ?: number ;
      direction?: 'normal' | 'reverse' | 'alternate' | 'alternate-reverse' ;
      duration: number
      easing?: string ;
      endDelay?: number ;
      fill?: 'none' | 'forwards' | 'backwards' | 'both' | 'auto' ;
      id?: string ;
      iterationStart?: number ;
      iterations?: number ;
    } ,

Penggunaan

 import { NgxLoaderIndicatorModule } from 'ngx-loader-indicator'

( ... )

@ NgModule ( {
  ( ... )
  imports : [
    NgxLoaderIndicatorModule . forRoot ( {
      img : 'https://avatars2.githubusercontent.com/u/32452610?s=200&v=4' ,
      loaderStyles : {
        background : 'rgba(255, 255, 255, 0.8)' ,
      } ,
      imgStyles : {
        width : '100px' ,
        background : 'yellow' ,
      } ,
      rotate : {
        duration : 5000
      } ,
    } ) ,
  ]
  ( ... )
} )