Aniamtion loading animation

use of new css style Animation

We hope to deepen our understanding of Animation and Transform this case by two api

The effect is as follows:

 

 

 

Note that here: image should be acquired by sending a request to the server, so as to achieve this effect by dynamically loading and node ajax

　　　　　　　　　　But this article has taken another local dynamic loading of ways to show: that by acquiring local image path, use the picture onload method to determine the success and failure load

 

Simulation results need to use the Chrome developer tools in the online environment:

 

 

 

 

 

 

html code is as follows:

<div id="wrap">
        <div class="inner">
        <img src="load/logo2.png" >
        <p>已加载0%</p>
                
        </div>
            
            
</div>

 

　　

css code is as follows:

@keyframes move{
                from{
                    /* top: 0px; */
                    /* debugger; */
                    transform: rotateY(0deg);
                }
                to{
                    /* top: 40px; */
                    transform: rotateY(360deg);
                }
            }
            *{
                padding: 0;
                margin: 0;
            }
            /* 解决滚动条 * / 
            HTML, body { 
                height : 100% ; 
                overflow : hidden ; 
            } / * position of the high level width centered vertically program * / 
            #wrap { 
                height : 100% ; 
                position : relative ; 
                background : Gray ; 
            } 
            #wrap> .inner { 
                position : Absolute ; 
                left : 50%
            
                ;
                top: 50%;
                transform: translate3d(-50%,-50%,0);
                text-align: center;
                white-space: nowrap;
                perspective: 200px;
                transform-style: preserve-3d;
                
            }
            #wrap>.inner>img{
                font-size: 50px;
                position: relative;
                animation: move 1s linear infinite normal;
                
            }

 

 

JavaScript code is as follows:

= the window.onload function () {
             var • pNode = document.querySelector ( "# wrap> .inner> P" );
             var In Flag =. 1 ;
             // var IMG = document.querySelector ( "# wrap> .inner> IMG") ; 
            // 1. first need an array of the objects traverse it js are added to the array at this point is not used and the node ajax analog data using the request database 
            var ARR = [];
             for (arrNode in imgData) { 
                ARR = arr.concat ( imgData [arrNode]); 
                            
            } 
            // 2. then added to the picture browser 
            for (I = 0; I <arr.length; I ++ ) {
                 var IMG = new newImage (); 
                img.src = ARR [I]; 
                
                img.onload = function () { 
                    In Flag ++ ;
                     // 3. At this time to calculate the content of p tag 
                    pNode.innerHTML = "loaded" + Math.round ( In Flag / arr.length * 100) + "%";                 } 
                img.onerror = function () { 
                    the console.log ( "fail to load image" ); 
                } 
            } 
        }