Home >Web Front-end >JS Tutorial >A brief analysis of JS asynchronous loading progress bar_javascript skills

A brief analysis of JS asynchronous loading progress bar_javascript skills

WBOYOriginal: 2016-05-16 15:02:141820browse

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>

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

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!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Detailed explanation of the model Model and its collection in the Backbone.js framework_Basic knowledgeNext article：Detailed explanation of the model Model and its collection in the Backbone.js framework_Basic knowledge

See more

A brief analysis of JS asynchronous loading progress bar_javascript skills

Related articles