Show effect:
1) When clicking Load, the simulation performs asynchronous loading. The browser is blocked. The progress bar appears.
Implementation ideas:
1. When the user clicks on the load button to execute an asynchronous request. The load bar appears when the method is called.
2. How to implement the progress bar?
1) Add a new div to document.body. Overwrite the browser. Set the background will be grayed out. z-index = 999. The user cannot modify the interface value when loading.
2) Add a dynamic div to 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" 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);lo adingDiv.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 raised. Re-encapsulate the Ajax request once. Implement the automatic bar method when calling Ajax request.
2. If it is Angular, Angular provides methods to monitor http calls. Just call the progress bar method when monitoring http execution requests. There is no need to call the progress bar method every time you execute http calls and monitor http execution requests. There is no need to call the progress bar method yourself every time you execute http.
The above content is related to the js asynchronous loading progress bar introduced to you by the editor. I hope it will be helpful to everyone!