Do it yourself. Web page load progress bar plugin based on jquery _jquery

Implementation of static effect

The top of the page loading progress bar, in recent years is very popular, many sites have adopted this way of loading. Online also has such a similar plug-in, today we summarize the top of the page linear page loading progress bar.
The overall wording is as follows:

body{
        margin:0;
      }
      #progress {
        position:fixed;
        height:2px;
        Background: #2085c5;
        Transition:opacity 500ms Linear
      }
      #progress. Done {
        opacity:0
      }
      #progress span {
        Position:absolute;
        height:2px;
        -webkit-box-shadow: #2085c5 1px 0 6px 1px;
        -webkit-border-radius:100%;
        opacity:1;
        width:150px;
        right:-10px;
        -webkit-animation:pulse 2s ease-out 0s infinite;
      }

      @-webkit-keyframes Pulse {
        30% {
          opacity:.6
        }
        60% {
          opacity:0;
        }
        100% {
          opacity:.6
        }
}

HTML code:

<div id= "Progress" >
      <span></span>
</div>

jquery Code:

$ ({property:0}). Animate ({property:100}, {
        duration:3000,
        step:function () {
          var percentage = Math.Round ( This.property);

          $ (' #progress '). CSS (' width ', percentage+ "%");

           if (percentage = =) {
              $ ("#progress"). AddClass ("Done");//complete, Hide Progress Bar}}}
);

Set its duration to be 3 seconds! You can change, the 3 seconds to change the time to your Web page loading time, you can make the Web dynamic loading progress bar.

Practical application of page load plug-in and application of load function
with regard to the loading of the page, it is difficult to find a good way to get the actual download progress of the page. The following methods are performed using the $ (window). Load (function () {}) and $ (document). Ready (function () {}), although this method is not very accurate, but can also simulate the download of the Web page.

$ (function () {
nprogress.start ();
})

$ (window). Load (function () {
  nprogress.done ();
})

There are a lot of friends who might not know much about the difference between $ (window). Load (function () {}) and $ (document). Ready (function () {}). We can write a small case to test!

For example:

$ (window). Load (function () {
  alert ("I am Load")
})
$ (function () {
 alert ("I am Document.ready")
})

Obviously, it must be document.ready first, because the Document.ready is executed after the DOM structure is loaded and does not need to be loaded so "complete", and $ (window). Load is executed after all the contents of the page have been loaded.

Sometimes

$ (window). Load (function () {
  alert (I am load)
})

You can also use the writing of JS:

Window.onload = function () {...} 

are executed after all downloads have been completed on the page. The two ways of writing are equivalent!