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 bar but without the bar.

For example, a simple animation that would link the progress to the opacity of the logo. So, when the page was 50% loaded, the logo was at 50% opacity; when the logo was 100% the page was loaded and the loading progress would .fadeOut().

I understand I can use $(window).load() to hide the animation <div>. I don't know how I can relate the progress and the opacity of the animation.

Is there a 'simple' way to achieve this?

I have searched for jQuery plugins, but I only found progress bar loads.

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";