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