JS--Asynchronous load progress bar

Today in the blog Park quiz inside see Bo friends asked how to implement the Ajax asynchronous loading production progress bar. Very curious to write one of their own.

Show Effect:

1) When you click Load, the simulation performs an asynchronous load. The browser is obscured. The progress bar appears.

Implementation ideas:

1. When the user clicks on the Load button to perform an asynchronous request. Call method appears add-in bar

2. How to implement the progress bar?

1) Add a div to document.body. Overwrite the browser. Setting the background is grayed out. Z-index = 999. The user cannot modify the boundary value when loading

2) Add a dynamic div to the document.body.

Code implementation:

main.html:

<! DOCTYPE html>
loading.js:
function showloading () {  var overdiv = document.createelement ("div");  var loadingdiv = document.createelement ("div");  var childDiv1 = document.createelement ("div");  var childDiv2 = document.createelement ("div");  var childDiv3 = document.createelement ("div");  OverDiv.classList.add (' over ');  LoadingDiv.classList.add (' spinner ');  ChildDiv1.classList.add (' Bounce1 ')  childDiv2.classList.add (' Bounce2 ')  childDiv3.classList.add (' Bounce3 ')  loadingdiv.appendchild (CHILDDIV1);  Loadingdiv.appendchild (CHILDDIV2);  Loadingdiv.appendchild (CHILDDIV3);  Document.body.appendChild (overdiv);  Document.body.appendChild (Loadingdiv)  setTimeout (function ()  {    Document.body.removeChild (overdiv );    Document.body.removeChild (Loadingdiv)  }, 5000);}
　　Loading.css
. spinner {width:150px;  Text-align:center;  left:50%;  top:50%;  Position:absolute; z-index:1000;}.  over {width:100%;  height:100%;  z-index:998;  Background-color:gray;  Position:absolute;  top:0px;  left:0px; opacity:0.2;}.  Spinner > div {width:30px;  height:30px;  Background-color: #67CF22;  border-radius:100%;  Display:inline-block;  -webkit-animation:bouncedelay 1.4s Infinite ease-in-out;  Animation:bouncedelay 1.4s Infinite ease-in-out;  /* Prevent first frame from flickering when animation starts */-webkit-animation-fill-mode:both; Animation-fill-mode:both;}.  Spinner. Bounce1 {-webkit-animation-delay: -0.32s; Animation-delay: -0.32s;}.  Spinner. Bounce2 {-webkit-animation-delay: -0.16s; Animation-delay: -0.16s;} @-webkit-keyframes bouncedelay {0, 80%, 100% {-webkit-transform:scale (0.0)} 40% {-webkit-transform:scale (1.0)}}@    KeyFrames bouncedelay {0, 80%, 100% {transform:scale (0.0);  -webkit-transform:scale (0.0);   } 40% { Transform:scale (1.0);  -webkit-transform:scale (1.0); }}
Summarize:
1. The method can be presented. Reseal the AJAX request once. Implements a progress bar method that automatically strips the AJAX request when it is called.
2. If it is angular. Angular provides a method to monitor $http calls. It is OK to call the progress bar method when monitoring HTTP execution requests. You do not have to call the method that appears on the progress bar each time you execute $http.
JS--Asynchronous load progress bar