利用css实现页面加载时旋转动画

Posted 2020-06-07

有时浏览一些网站时在刚加载页面时候会出现一个滚动动画如下图,特别是对于一些移动端的站点或者混合应用来说应该用户体验会好很多，扒了下页面发现是用css样式控制的，于是把页面以及css样式赋值了下来，

html如下

<div id="page-loader" class="fade in"><span class="spinner"></span></div>

css样式如下

@-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;
}

效果就出来了，不过别忘了页面加载完后隐藏额，不然会一直转到天亮，根本停不下来！

document.getElementById(‘page-loader‘).className=‘fade‘
jQuery代码如下
$(‘#page-loader‘).removeClass(‘in‘);

 

这样页面加载或者异步提交表单时时不时感觉好多了？不管你信不信，反正我信了