angular loading animation while content is loading

Question

I have an angular page that loads some content on a local drive. So its running without a webserver. Sometimes its loading quiet long (10secs).

I tried to implement a jquery loading animation, but even the jquery loading animation starts after the normal content is loaded from the JS.

This is how the page looks while its loading my angular content:

How Can I implement a loading spinner or text, instead of showing the raw {{example.example}} values?

Thanks.

Solution

Before angular load you can show your loader on index.html page without any javascript code. Just paste following code in your index.html

<app-root>
<div class="loader"></div>
</app-root>

Paste following code in header tag of index.html

<style>
.loader {
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  width: 120px;
  height: 120px;
  -webkit-animation: spin 2s linear infinite; /* Safari */
  animation: spin 2s linear infinite;
}

/* Safari */
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
</style>

When angular will loaded successfully then code in app-root component will be replaced by original content.

Comments

[MisterGomez93]

Hey, so i try tu put it in the HTML file, but its not working. U have to know that everything is hosted local withoput a webserver. Just in a folder and my chrome and IE is not unsecure. Its in a corporate network. I alsow ork with iframes! im very limited, thatswhy I work with angular and not PHP and mysql for example. so i added the CSS between the header and the <app-root> <div class="loader"></div> </app-root> into the .html file. not working :/

[MisterGomez93]

one more info: im using angular <script data-require="[email protected]" data-semver="1.2.0-rc3" src="code.angularjs.org/1.2.0-rc.3/angular.min.js"></…>

[Sandip Jaiswal]

So it means your AppComponent is not taking time to load. Can you please attach a screenshot of network tab of Developer tool of browser

[Sandip Jaiswal]

Sorry, I had provided code for Angular 2, 4, 5 and 6

[MisterGomez93]

since u gave me the hint with the network tab in the developer tool, i fixed it by myself. i saw which parts had the longest timings and deleted them or changed them.. or just saved them local int he same folder!!! Thanks a lot!

[Muhammad bin Yusrat]

Great Answer! Really helpful! Thanks!

[NonameLover]

This doesn't work when using something like router-outlet

[ScipioAfricanus]

Is there a way to do this with the spinner from ngzorro library? Seems to me that the app has to load before serving libraries..