HTML Loading Animation

Question

I have a website that loses layout scheme while the page isn\'t loaded.

What I\'d like to do is to have an animation linked to the loading progress, like a progress

Answer 1

You could easily achieve this using some basic CSS, and then writing a function to "update" the value you assign to the CSS of the page that would, while the page is not loaded/the loading bar is not fully opaque then it will carry on running.

This can easily be achieved with JQuery or JavaScript.

To actually get information on the loading of the DOM, you can use Progress Events. The example given in the documentation of Progress Events is this:

So in this example you are loading "magical-unicorns", and assigning the parapgraph

the current loaded percentage. To change this to modify the CSS I would use JavaScript to change your opacity eg. document.getElementById("myLoadBar").style.opacity = "0.5";