A brief analysis of JS asynchronous loading progress bar

A brief analysis of JS asynchronous loading progress bar_javascript skills

WBOY

Release： 2016-05-16 15:02:14

Original

1809 people have browsed it

Show effect:

1) When you click Load, simulate asynchronous loading. The browser is blocked. The progress bar appears.

Implementation ideas:

1. When the user clicks the load button to perform an asynchronous request. The method is called and a loading bar appears

2. How to implement the progress bar?

1) Add a div in document.body and cover the browser. Set the background to gray. z-index = 999. The user cannot modify the interface value when loading

2) Add a dynamic div in document.body.

Code implementation:

Main.html:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="Loading.js" charset="utf-8"></script>
<link rel="stylesheet" href="Loading.css" media="screen" title="no title" charset="utf-8">
</head>
<body>
<button onclick="showLoading()">Load</button>
</body>
</html>

Copy after login

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);
}

Copy after login

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);
}
}

Copy after login

Summary:

1. You can propose the method. Re-encapsulate the Ajax request. Use the progress bar method to automatically bar when calling the Ajax request.

2. If it is Angular. Angular provides a method to monitor http calls. Just call the progress bar method when monitoring http execution requests. There is no need to execute the http call every time. Just call the progress bar method when monitoring http execution requests. No need to call the method that shows the progress bar every time you execute http.

The above content is related to the js asynchronous loading progress bar introduced by the editor. I hope it will be helpful to everyone!