Animacja ładowania Angular 2 zawiesza się

Question

Opracowałem aplikację Angular 2, która ma spory rozmiar i zajmuje chwilę, aby załadować (vendor.js ma około 5 MB). Aby czas trochę bardziej przyjemny dla użytkownika I zastępuje standardową

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

z animacji CSS (bar ładowanie) lub animacji GIF (próbowałem obu) w drodze:

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

lub

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

Ale nic z tego nie działa od animacji CSS (lub GIF) zawiesza się podczas ładowania strony, a kiedy nadal kątowego aplikacja jest gotowa i jest wyświetlany. Rezultatem jest zamarznięta animacja ładowania, a następnie aplikacja = sytuacja nie jest lepsza niż wcześniej ...

BTW: Javascript (np. setInterval) również nie jest wykonywany podczas tego czasu ładowania. Próbowałem dołączyć vendor.js z async i defer, ale bez powodzenia.

Wszelkie pomysły?

Edycja: wydaje się być kwestią Google Chrome - za pomocą Firefoksa animacja działa płynnie.

Answer 1

Używam spinnera ładującego na mojej osobistej stronie przy użyciu CSS, tylko pomyślałem, że udostępnię mój kod, ponieważ działa on dla mnie i nie wydaje się, aby miał problemy z dużym kodem. Oczywiście będziesz chciał dostosować go do swoich potrzeb, jeśli to się skończy.

W HTML:

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

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