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.

Answer 1

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.