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 และนำเข้า directive 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 > 

ตัวเลือก

คุณสามารถกำหนดตัวเลือกที่กำหนดเองของคุณ

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