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.

Hello ! Welcome to StackOverflow ! What did you try ?

Zooly
– Zooly

2018-10-03 14:15:17 +00:00
Commented Oct 3, 2018 at 14:15 — Zooly
– Zooly, Commented Oct 3, 2018 at 14:15

Sandip Jaiswal · Accepted Answer · 2018-10-03 14:16:23Z

21

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.

answered Oct 3, 2018 at 14:16

Sandip Jaiswal

3,7702 gold badges15 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

MisterGomez93 Over a year ago

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 Over a year ago

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 Over a year ago

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 Over a year ago

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

MisterGomez93 Over a year ago

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!

|

Collectives™ on Stack Overflow

angular loading animation while content is loading

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related