Geek Answers Handbook

HTML animation loading

I have a website that loses the layout scheme until the page is loaded.

I would like to make an animation related to the progress of the download, for example, a progress bar, but without a panel.

For example, a simple animation that connects progress with the opacity of the logo. Thus, when the page was loaded at 50%, the logo had an opacity of 50%; when the logo was 100%, the page was loaded, and the download progress was .fadeOut().

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

Is there a “simple” way to achieve this?

I searched jQuery plugins, but I only found that the load was fulfilling.

+4
source share
1 answer

You can easily achieve this by using basic CSS and then writing a function to “refresh” the value that you assign to the CSS of the page, which will be until the page is loaded / the loading bar is completely opaque, then it will continue to work.

This can be easily achieved using jQuery or JavaScript.

To get information about loading the DOM, you can use Progress Events . The example in the documentation for Progress events is as follows:

<!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>

, " " <p> . , CSS, JavaScript , . document.getElementById("myLoadBar").style.opacity = "0.5";

+1

More articles:


All Articles