LEARN

[Angular]Spinner 로딩 화면 만들기

 
Contents
  1. [Angular]Spinner 로딩 화면 만들기

[Angular]Spinner 로딩 화면 만들기

Spinner란

spinner란 로딩중 UI 화면을 라이브러리로 제공해주는 것을 말한다.

ngx-spinner 특징
  • Angular 13 지원
  • 커스텀 스피너 이미지 지원(gif), img태그 전달 가능
  • 다중 스피너
  • 서비스를 통해 구성 가능한 옵션
  • 전체 화면 모드(활성화/비활성화)
  • show()/hide()메서드 반환 약속
  • 동적z-index
  • hide/show회전 하는 동안 부드러운 애니메이션
  • 새롭게 업데이트된 데모 웹사이트
  • 페이드 애니메이션 비활성화 옵션
  • @Input() 변수를 사용하여 템플릿에서 스피너 표시/숨기기
  • 더 작은 번들 크기
custom spinner

spinner 사용하는 방법

spinner 설치

npm 설치

$ npm install ngx-spinner –save

yarn 설치

$ yarn add ngx-spinner

angular-cli:

$ ng add ngx-spinner

spinner 사용하기

anguler.json 파일에 css 애니메이션 파일 추가
{ 
  "styles" : [ 
    "node_modules/ngx-spinner/animations/ball-scale-multiple.css"  // ===> 애니메이션 이름을 기반으로 CSS 파일 추가(여기서는 "ball-scale-multiple") 
    // 필요한 경우 여러 파일을 추가할 수 있습니다 
  . ] 
}
NgxSpinnerModule 모듈 가져오기
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from "@angular/core";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
// Import library module
import { NgxSpinnerModule } from "ngx-spinner";

@NgModule({
  imports: [
    // ...
    BrowserAnimationsModule,
    NgxSpinnerModule,
  ],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class AppModule {}
NgxSpinnerModule 모듈 사용하기
import { NgxSpinnerService } from "ngx-spinner";

class AppComponent implements OnInit {
  constructor(private spinner: NgxSpinnerService) {}

  ngOnInit() {
    /** spinner starts on init */
    this.spinner.show();

    setTimeout(() => {
      /** spinner ends after 5 seconds */
      this.spinner.hide();
    }, 5000);
  }
}
템플릿에서 사용하기
<ngx-spinner type="ball-scale-multiple"></ngx-spinner>

ngx-spinner

RELATED POST