Angular pre-bootstrap (first screen) loader's animation freezes during initial loading

问题

Simple demo here: https://plnkr.co/edit/IA0Bs5VH9WwVbLlKPQ6X?p=preview (I used the official angular.io/docs demo app)

The problem is: the first screen loader (I used loader.svg) animation freezes for a second during the initial loading of Angular App

The process goes like this: open the page, svg loader animation starts -> loader animation freezes -> loader animation re-starts -> angular app finish loading, loader hided

In this demo, the freeze is more obvious: http://iarouse.com/dist-angular2-material/v1/

<my-app>
  <!-- the loader -->
  <div id="loader-container"></div>
</my-app>

My real app is larger, and the initial loader animation freezes for a few seconds during bootstrap process, which is frustrating

Any thing I can do to make it smooth?

回答1:

I had your problem because I was rendering a gif spinner image. I tried the solution posted by @bviale and it worked.

Simply used the code founded in https://www.w3schools.com/howto/howto_css_loader.asp and putted between the app-root tag.

来源：https://stackoverflow.com/questions/43201592/angular-pre-bootstrap-first-screen-loaders-animation-freezes-during-initial-l