Simple analysis of JS asynchronous loading progress bar _javascript Skill

Show Effect:

1 when the load is clicked, the simulation performs an asynchronous load. Browsers are blocked. The progress bar appears.

Realize the idea:

1. When the user clicks on the Load button to execute the asynchronous request. Call method Occurrence Add-in Bar

2. How to achieve the progress bar?

1 Add a div in document.body. Overwrite browser. Setting the background will be gray. Z-index = 999. Allows users to not modify 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; w
Ebkit-animation:bouncedelay 1.4s Infinite ease-in-out;
Animation:bouncedelay 1.4s Infinite ease-in-out;
/* Prevent the 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-de
Lay: -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 may be presented. Re-encapsulate the AJAX request once. Implementation of the call to the AJAX request of the automatic bar with the progress bar method.

2. If it's angular. Angular provides methods to monitor HTTP calls. The progress bar method is invoked when monitoring HTTP execution requests. Do not need to be executed on each HTTP invocation. Call the progress bar method when monitoring HTTP execution requests. You do not have to call a progress bar on your own every time you execute HTTP.

The above content is small series to introduce the JS asynchronous loading progress bar related content, I hope to help you!