Rotate animations with CSS for page loading

Sometimes browse some sites when the page just loaded a scrolling animation, especially for some mobile site or hybrid applications should be a lot better user experience, grilled the next page found to be using CSS style control, so the page and CSS style to assign the value down,

HTML as follows

<id= "Page-loader"  class= "Fade in"><  class = "Spinner" ></ span ></ Div >

CSS styles are as follows

@-webkit-keyframes Rotation{From {-webkit-transform:Rotate (0deg)} to{-webkit-transform:Rotate (359deg)}}@-moz-keyframes Rotation{From {-moz-transform:Rotate (0deg)} to{-moz-transform:Rotate (359deg)}}@-o-keyframes Rotation{From {-o-transform:Rotate (0deg)} to{-o-transform:Rotate (359deg)}} @keyframes Rotation{From {transform:Rotate (0deg)} to{Transform:Rotate (359deg)}}.fade.in{Filter:Alpha (opacity=100);}. fade.in{Opacity:1;}. Fade{Opacity:0;Filter:Alpha (opacity=0);-webkit-transition:opacity. 3s linear;transition:opacity. 3s linear;}. Fade{Opacity:0;-webkit-transition:opacity. 15s Linear;-o-transition:opacity. 15s Linear;transition:opacity. 15s Linear;}. fade.in. Spinner,. fade.in. Spinner-small{-webkit-animation:rotation. 6s Infinite linear;-moz-animation:rotation. 6s Infinite linear;-o-animation:rotation. 6s Infinite linear;Animation:rotation. 6s Infinite linear;}. Spinner{Height:40px;width:40px;position:Absolute;Top:50%; Left:50%;margin:-20px-20px 0 0;Border:2px solid #fff;Border-top:2px solid #24B498;Border-radius:100%;}#page-loader.fade.in{Display:Block;}#page-loader.fade{Display:None;}#page-loader{position:fixed;Top:0; Left:0;Bottom:0; Right:0;background:#E6E8EC;}

The effect is out, but do not forget the page loaded after the hidden amount, or it will always go to the dawn, can not stop!

document.getElementById (' Page-loader '). Classname= ' fade 'jquery code is as follows $ (' #page-loader '). Removeclass (' in ');

Does this feel much better when the page loads or asynchronously submits the form? Whether you believe it or not, I believe it anyway.

Rotate animations with CSS for page loading