[angular] ngx-spinner 로딩바(로딩 스피너)

angular에서 로딩바 구현하는 방법

 

2022.02.23 기준으로 angular 13을 지원하고 있습니다.

gif를 이용한 커스텀도 가능합니다.

Multiple Sprinners도 지원합니다.

전체 화면 기능도 enable/disable 가능합니다.

z-index를 지원해서 간단하게 레이어의 위치를 지정 가능합니다.

무엇보다 직접 만드는것 보다 빠르게 적용이 가능합니다.

---

설치

Using npm:

$ npm install ngx-spinner --save

Using yarn:

$ yarn add ngx-spinner

Using angular-cli:

$ ng add ngx-spinner

 

설치 방법은 세가지를 지원하고 있으며 직접 등록하고 싶다면 package.json에 등록해주시면 됩니다.

"dependencies": {
    "ngx-spinner": "^10.0.1"
}

---

사용하기

 

 angular.json 설정에 css를 추가 합니다. 공식 가이드에서 권장하는 방법이며 css 파일이 node_modules에 없다면 이번은 생략해도 됩니다.

{
  "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
  ]
}

root module에 NgxSpinnerModule 추가(AppModule):

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

서비스 영역에서 ngx-spinner 사용하기

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

html영역에 추가해주시면 됩니다.

<ngx-spinner type="ball-scale-multiple"></ngx-spinner>

---

메소드는 show, hide 이렇게 제공됩니다.

• NgxSpinnerService.show() : Shows the spinner
• NgxSpinnerService.hide() : Hides the spinner

---

스피너 옵션

• [bdColor]: RGBA color format. To set background-color for backdrop, default rgba(51,51,51,0.8) where alpha value(0.8) is opacity of backdrop
• [size]: Anyone from small, default, medium, large. To set size of spinner, default large
• [color]: Any css color format. To set color of spinner, default #fff
• [type]: Choose any animation spinner from Load Awesome. To set type of spinner
• [fullScreen]: true or false To enable/disable fullscreen mode(overlay), default true
• [name]: For multiple spinners To set name for spinner, default primary
• [zIndex]: For dynamic z-index To set z-index for the spinner, default 99999
• [template]: For custom spinner image To set custom template for the custom spinner, default null
• [showSpinner]: true or false To show/hide spinner from template using variable
• [disableAnimation]: true or false To enable/disable fade animation of spinner, default false

옵션을 적용한 예시

<ngx-spinner
  bdColor="rgba(51,51,51,0.8)"
  size="medium"
  color="#fff"
  type="ball-scale-multiple"
>
  <p style="font-size: 20px; color: white">Loading...</p>
</ngx-spinner>

Using Custom Spinner

<ngx-spinner
  bdColor="rgba(0, 0, 0, 1)"
  template="https://media.giphy.com/media/o8igknyuKs6aY/giphy.gif' />"
>
</ngx-spinner>

 

직접 해보기 : https://stackblitz.com/edit/angular-7arfhb?file=src/app/app.component.ts 

StackBlitz