The js progress loading animation program is my personal work. If it is not well written, you can refer to it, but without my permission, please do not use it for other purposes!
I wrote a homepage progress loading animation in the morning. I wanted to use it on my blog. I found that the blog park loaded too fast and could not see the animation effect at all. I just loaded 'Complete'. Forget it, don't make the blog too bloated!
So I wrote a demo page and added an iframe to the body to load larger websites, so that I can see the effect!
The playback time of opening CSS animations with Safari has become synchronized. I don’t know why, but the local test is fine (please give me some advice!), there is no problem with Chrome and Firefox, but I haven’t tested IE
Loading time statistics I used the performance property of a Windows object, which is a method specifically used to calculate the exact time. This is MDN's description of the performance property.
The implementation principle of this example is relatively simple, but it does not really display the loading progress according to the file size. It only changes the display progress according to the status of document.readyState when the document.onreadystatechange event is triggered. In fact, there is another more reliable method, using the progress event of an instance of the XMLHttpRequest object to interpret XMLHttpRequest in detail, such as:
var request = new XMLHttpRequest(); request.onprogress = function (e) { if(e.lengthComputable){ //lengthComputable refers to whether the file has a size, the value is true, false progress.innerHTML = Math.round(100* e.loaded/ e.total) + /'%/'; //loaded, total represents the size and total size that has been loaded} }It is quite troublesome to implement with the above method, and it cannot achieve 100% real loading progress, so I just pretended to be a little fake, no need for him!
This example also uses the document.styleSheets[0].insertRule() method. Here is my summary of it: a summary of the method of reading and writing CSS styles with native JS
Regarding the implementation of CSS animation, please read the code yourself. It is very simple code. If you have difficulty reading it, it is recommended to make up for the basics of CSS. I will introduce some practical information. The website of CSS Chinese reference manual. I have limited expression skills, so I won’t be chewing on it here.
Here is the complete code + demonstration:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Sufu's works</title> <script> document.onreadystatechange = function () { function $id(id){return document.getElementById(id)} var width = 0,id, preloader_line = $id('preloader_line').firstElementChild, preloader = $id('preloader'), preloader_center = $id('preloader_center'), preloader_btn = $id('preloader_btn'), preloader_loading = $id('preloader_loading'); if (document.readyState == "interactive") { loading(1,110,50); } if (document.readyState == "complete") { loading(5,120,16.7); preloader_loading.id = 'preloader_loaded'; preloader_loading.innerHTML = 'Loading Complete'+'<br/>'+'Using: '+performance.now().toFixed(3)+' ms'; preloader_btn.innerHTML = 'ENTE R'; preloader_btn.style.borderBottom = '4px solid green'; preloader_btn.style.fontStyle = 'inherit'; preloader_btn.style.fontSize = '24px'; if(document.styleSheets[0].insertRule){ document.styleSheets[0].insertRule('#preloader_btn:hover{border-bottom: 4px solid green;border-radius: 60px;color: red;}',0); }else{//Compatible with document.styleSheets[0].addRule('#preloader_btn:hover{border-bottom: 4px solid green;border-radius: 60px;color: red;}',0); } preloader_btn.onclick = function () { var opacity = 1,id; function hide(){ if(opacity<=0){ clearTimeout(id); preloader.style.display = 'none'; document.body.style.overflow = 'auto'; return; } opacity -= 0.1; preloader.style.opacity = opacity; id = setTimeout(function(){ hide(); },50); } hide(); }; } function loading(step,max,time){ if(width>=max){ clearTimeout(id); if(max >= 120){ preloader_line.parentNode.style.display = 'none'; } return; } width += step; preloader_line.style.width = width+'px'; id = setTimeout(function(){ loading(step,max,time); },time); } } }; </script> <style> body{ overflow: hidden; } #preloader{ position: absolute; width: 100%; height: 100%; background-color: white; z-index: 999; } #preloader_center{ position: absolute; left: 0; right: 0; top: 0; width: 150px; height: 75px; margin:auto; } #preloader_loading{ position: absolute; left: 0; right: 0; top: 45px; margin: auto; width: 96px; height: 30px; } #preloader_loaded{ position: absolute; left: 0; right: 0; top: 45px; margin: auto; font-size: 12px; text-align: center; line-height: 30px; } #preloader_loading span{ position: absolute; width: 10px; height: 2px; top: 0; bottom: 0; margin: auto; background-color: #9b59b6; animation: loading 1.5s infinite ease-in-out ; } #preloader_loading span:nth-child(2){ left: 12px; animation-delay: .1s; } #preloader_loading span:nth-child(3){ left: 24px; animation-delay: .2s; } #preloader_loading span:nth-child(4){ left: 36px; animation-delay: .3s; } #preloader_loading span:nth-child(5){ left: 48px; animation-delay: .4s; } #preloader_loading span:nth-child(5){ left: 48px; animation-delay: .4s; } #preloader_loading span:nth-child(5){ left: 48px; animation-delay: .4s; } #preloader_loading span:nth-child(5){ left: 48px; animation-delay: .4s; } #preloader_loading span:nth-child(4){ left: 36px; animation-delay: .3s; } #preloader_loading span:nth-child(5){ left: 48px; animation-delay: .4s; } #preloader_loading span:nth-child(5){ left: 48px; animation-delay: .4s; } #preloader_loading span:nth-child(5){ left: 48px; animation-delay: .4s; } #preloader_loading span:nth-child(4){ left: 36px; animation-delay: .3s; } #preloader_loading span:nth-child(5){ left: 48px; animation-delay: .4s; } #preloader_load span:nth-child(6){ left: 50px; animation-delay: .5s; } #preloader_loading span:nth-child(7){ left: 62px; animation-delay: .6s; } #preloader_loading span:nth-child(8){ left: 74px; animation-delay: .7s; } #preloader_loading span:nth-child(9){ left: 86px; animation-delay: .8s; } @keyframes loading { 0%{height: 2px;background:#9b59b6;} 15%{height: 20px;background:#3498db;} 50%{height: 2px;background:#9b59b6;} 100%{height: 2px;background:#9b59b6;} } iframe{width: 100%;height: 1000px;} #preloader_btn{ position: absolute; left: 0; right: 0; top: 0; margin:auto; display: block; width: 122px; height: 40px; font-size: 14px; text-align: center; line-height: 40px; cursor: pointer; color: #9b59b6; font-style: italic; -webkit-transition: all .5s; -moz-transition: all .5s; -ms-transition: all .5s; -o-transition: all .5s; transition: all .5s; } #preloader_line{ position: absolute; left: 0; right: 0; top: 40px; margin:auto; width: 120px; height: 2px; border: 1px solid green; } #preloader_line span{ display: block; height: 2px; width: 0; background-color: green; } </style></head><body><div id="preloader"> <div id="preloader_center"> <span id="preloader_btn">Loading...</span> <span id="preloader_line"> <span></span> </span> <div id="preloader_line"> <span></span> </span> <div id="preloader_loading"> <span></span> <span></span> <span></span> <span></span> <span></span> </div> </div></div><iframe src="http://jd.com"></iframe></body></html>The above is all the content of this article. I hope it will be helpful to everyone's learning and I hope everyone will support Wulin.com more.