Home > Developer > JavaScript
Analysis of JS asynchronous loading progress bar and Analysis of js asynchronous loading
Display Effect:
1) When you click Load, simulate asynchronous loading. The browser is blocked. The progress bar appears.
Implementation ideas:
1. When you click load button to execute an asynchronous request, a load entry appears when you call the method.
2. How to Implement the progress bar?
1) Add a div in document. body. overwrite the browser. Set the background to Gray. z-index = 999. During loading, the user cannot modify the interface value.
2) Add a dynamic div in 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);}}Summary:
1. methods can be proposed. The Ajax request can be re-encapsulated once. The progress bar method is used to automatically call Ajax requests.
2. for Angular. angular provides methods to monitor http calls. you can call the progress bar method when monitoring http request execution. you do not need to execute an http call every time. you can call the progress bar method when monitoring http request execution. you do not need to call the method with a progress bar every time you execute http.
The above content is related to the js asynchronous loading progress bar introduced by xiaobian. I hope it will help you!
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
