Animate Angular2 compilation process by using ng2-spinning-preloader service.
npm install --save ng2-spinning-preloaderImport the NgSpinningPreloader class and add it to your application module as an import. Once you've done this, you'll be able to inject `NgSpinningPreloader' into your Angular2 Components.
import {NgSpinningPreloader} from 'ng2-spinning-preloader';
@NgModule({
/* ... */
providers: [ NgSpinningPreloader ]
})
export class AppModule {}Insert in your index.html spinning-preloader element
<body>
<div class="spinning-preloader-container">
<div class="spinning-preloader-elements"></div>
</div>
<app></app>
</body>Import styles of ng-2spinning-preloader
require('ng2-spinning-preloader/dist/ng-spinning-preloader.css');import {
Component,
OnInit
} from '@angular/core';
import {NgSpinningPreloader} from 'ng2-spinning-preloader';
@Component({
selector: 'app',
template: 'App component'
})
export class AppComponent implements OnInit {
constructor(private ngSpinningPreloader: NgSpinningPreloader) {}
ngOnInit() {
this.ngSpinningPreloader.stop();
}
}