Angular 2 loading animation freezes

Question

I've developed an Angular 2 app which has quite a bit of size and takes a moment to load (the vendor.js is about 5 MB big). To make the time a little more pleasant for the user I replaced the standard

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

with a CSS animation (loading bar) or a GIF animation (I tried both) in the way:

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

or

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

But none of this works since the animation (CSS or GIF) freezes during page load and when it continues the Angular app is ready and is displayed. So the result is a freezed loading animation and then the app = situation not better than before ...

BTW: Javascript (e.g. a setInterval) is also not executed during this load time. I tried to include the vendor.js with async and defer but without success.

Any ideas?

Edit: seems to be a Google Chrome issue - using Firefox the animation works smoothly.

Answer 1

I use a loading spinner on my personal site using CSS; just thought I’d share my code because it works for me and doesn’t appear to have any issues with a large codebase. Obviously you’ll want to adjust it to your needs if this ends up working for you.

@keyframes spin {
    to { transform: rotate(360deg); }
}

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

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