Native JS Implementation of Home Page Progress Loading Animation

The js progress loading animation program is my personal work, and it is not written well, but it can be referred to. However, please do not use it for other purposes without my permission!　

In the morning, I wrote a homepage progress loading animation, and I wanted to use it in my blog. However, after testing, I found that the loading speed of Blog Garden was too fast, and the animation effect could not be seen at all, and it directly loaded 'Complete'. Never mind, let's not make the blog too bloated!　

So I wrote a demonstration page, added an iframe in the body to load a larger website, so you can see the effect!　

I opened it with Safari and it seems that the playback time of CSS animations becomes synchronized, I don't know what the reason is, local testing is fine (please point out the big god!); Chrome and Firefox are fine, and I haven't tested IE　

I used the Window object's performance attribute to calculate the loading time statistics, which is a method specifically used to calculate precise time. This is the MDN aboutperformance attributedescription　

The implementation principle of this example is relatively simple, but it does not truly display the loading progress based on the file size. It only changes the display progress when the document.onreadystatechange event is triggered, based on the state of document.readyState. In fact, there is another more reliable method, using the progress event of the XMLHttpRequest object instance, detailed interpretation of XMLHttpRequest, such as:

 var request = new XMLHttpRequest();
 request.onprogress = function (e) {
 if(e.lengthComputable){ //lengthComputable indicates whether the file has a size, with a value of true or false
 progress.innerHTML = Math.round(100* e.loaded/ e.total) + \'%\'; //loaded, total represent the loaded size and total size
 }
 }

Implementing it with the above methods is quite麻烦，and it also cannot achieve100% actual loading progress, so I arbitrarily made it up, and I won't use it anymore!　

This example also uses the document.styleSheets[0].insertRule() method, and here is my summary: Summary of reading and writing CSS styles with native JavaScript　

Regarding the implementation of CSS animations, please check the code yourself, it's quite simple code. If you find it difficult to understand, it's recommended to reinforce your CSS fundamentals. Here's some useful information:CSS Reference Manual WebsiteMy ability to express is limited, so I won't chatter here　

Below is the complete code+Demonstration:

!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Su Fu'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 = 'E N T E 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{//Compatibility with IE9The following
 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;
 bottom: 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(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_loading">
 <span></span>
 <span></span>
 <span></span>
 <span></span>
 <span></span>
 <span></span>
 <span></span>
 <span></span>
 <span></span>
 </div>
 </div>
</div>
<iframe src="http://jd.com"></iframe>
</body>
</html>

That's all for this article. I hope it will be helpful to your learning, and I also hope everyone will support the Yelling Tutorial.

Declaration: The content of this article is from the Internet, and the copyright belongs to the original author. The content is contributed and uploaded by Internet users spontaneously. This website does not own the copyright, does not edit the content manually, and does not assume any relevant legal liability. If you find any content suspected of copyright infringement, please send an email to: notice#oldtoolbag.com (Please replace # with @ when sending an email to report abuse, and provide relevant evidence. Once verified, this site will immediately delete the content suspected of infringement.)

Basic Tutorial