ngx loader indicator

Индикатор загрузки NGX

Индикатор загрузки NGX является лучшей директивой, чтобы иметь загрузчик без обертывания вашего элемента до дополнительного компонента

Вы также можете попробовать нашу маску NGX. Вы также можете попробовать нашу NGX Copypaste проверить это.

Вы можете попробовать вживую демо с примерами.

Установка

$ npm install --save ngx-loader-indicator

QuickStart, если ngx-loader-indicator версия> = 15.0.0

Обратите внимание, эта версия работает на Angular> = 14.0.0

Настройка для приложения с provideEnvironmentNgxLoaderIndicator

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

или настройка для функции с provideNgxLoaderIndicator и импортной автономной директивой 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, если ngx-loader-indicator версия <15.0.0

Обратите внимание, эта версия работает на Angular <12.0.0

Импорт модуль в необходимом модуле.

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

( ... )

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

Использование

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

Примеры

 < 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 > 

Параметры

Вы можете определить свои пользовательские параметры

пользовательский IMG (строка) и цвета

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

Пользовательские цветы макета обертки

  {
    loaderStyles : {
      background : string ,
    } ,
  }

Параметры анимации для ротации изображения

    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 ;
    } ,

Использование

 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
      } ,
    } ) ,
  ]
  ( ... )
} )