ngx-spinner

참조 npm

Install

npm i ngx-spinner

Add css animation files to angular.json config

architect 의 build와 test 에 동시에 적용해 주세요.

{
  "styles": [
    "node_modules/ngx-spinner/animations/ball-scale-multiple.css" // ===> Add css file based on your animation name(here it's "ball-scale-multiple")
    // You're able to add multiple files if you need
  ]
}

Import NgxSpinnerModule in in the root module(AppModule):

import { NgxSpinnerModule } from "ngx-spinner";

@NgModule({
  imports: [
    NgxSpinnerModule,
    // 혹은 아래와 같이 특정 이미지를 전체 페이지에 출력하고자 하면
    NgxSpinnerModule.forRoot({ type: 'ball-scale-multiple' }),
  ],
})
export class AppModule {}

page에 적용하기

• html

<ngx-spinner></ngx-spinner> <!-- global로 적용된 것 사용시 -->
<ngx-spinner type="ball-scale-multiple"></ngx-spinner> <!-- local로 별도 사용시 -->

• component

import { NgxSpinnerService } from 'ngx-spinner';
..........
constructor(
  private spinner: NgxSpinnerService,
) {}

this.spinner.show(); // spinner 보여주기
this.spinner.hide(); // spinner 숨시기

여러개 띄우기

ngx-spinner의 name에 값을 전달하고 show, hide시에도 이 이름으로 하면 여러개를 제어할 수 있다.

this.spinner.show('forPage1');
this.spinner.hide('forPage1');

<ngx-spinner
    [name]="'forPage1'"
    color="#f4696b"
    [fullScreen] = "false">
</ngx-spinner>

특정 영역에서만 띄우기

fullScreen=false 시 전체 페이지가 아니라 특정 영역 안에서만 띄운다.

<div>
  <ngx-spinner
      color="#f4696b"
      bdColor="rgba(f,f,f,0.32)"
      [fullScreen] = "false">
  </ngx-spinner>
</div>