HTML Loading Animation
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
-
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:
<!DOCTYPE html> <title>Waiting for Magical Unicorns</title> <progress id="p"></progress> <script> var progressBar = document.getElementById("p"), client = new XMLHttpRequest(); client.open("GET", "magical-unicorns"); client.onprogress = function(pe) { if(pe.lengthComputable) { progressBar.max = pe.total; progressBar.value = pe.loaded; } } client.onloadend = function(pe) { progressBar.value = pe.loaded; } client.send(); </script>So in this example you are loading "magical-unicorns", and assigning the parapgraph
<p>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";讨论(0)
加载中...
- 热议问题