Angular 2 lädt Animation einfriert

Question

Ich habe eine Angular 2 App entwickelt, die ziemlich groß ist und einen Moment braucht, um zu laden (die vendor.js ist etwa 5 MB groß). Um die Zeit ein wenig angenehmer für den Benutzer zu machen ersetzt wir den Standard

<span class="loading">Loading...</span> 

mit einer CSS-Animation (loading bar) oder einer GIF-Animation (Ich habe versucht, beide) in der Art und Weise:

<span class="loading"><img src="loading.gif" /><br/>Wait ...</span> 

oder

<span class="loading"><span class="circle-loader-with-css-animations"></span>Wait ...</span> 

Aber nichts davon funktioniert, da die Animation (CSS oder GIF) friert während Seite zu laden und wenn es die Winkel App weiterhin bereit ist, und wird angezeigt. Also das Ergebnis ist eine Freezed-Lade-Animation und dann die App = Situation nicht besser als zuvor ...

BTW: Javascript (z. B. eine setInterval) wird auch nicht während dieser Ladezeit ausgeführt. Ich habe versucht, die vendor.js mit async und defer aber ohne Erfolg einzuschließen.

Irgendwelche Ideen?

Edit: scheint ein Google Chrome-Problem zu sein - mit Firefox funktioniert die Animation reibungslos.

Answer 1

Ich benutze einen Lade-Spinner auf meiner persönlichen Website mit CSS, dachte nur, ich würde meinen Code teilen, weil es für mich funktioniert und scheint keine Probleme mit einer großen Codebasis zu haben. Offensichtlich werden Sie es an Ihre Bedürfnisse anpassen wollen, wenn dies für Sie funktioniert.

Im HTML:

<div class="loader"></div> 

Im CSS:

.loader { 
    border: 16px solid #f3f3f3; 
    border-radius: 50%; 
    border-top: 16px solid grey; 
    width: 70px; 
    height: 70px; 
    -webkit-animation: spin 1s linear infinite; 
    animation: spin 1s linear infinite; 
}