css动画----loading加载动画

今天做项目的时候，一个loading加载动画，让我搞了很长时间，后来ui给了看了一个loading加载源码，仿照着源码，把样式改了一下，成功了，并且通过ui给的链接，发现里面有很多优秀的源码可以借鉴，这是加载动画的源码，loading加载动画，

这是自己封装的html部分

{/* 登录时loading加载动画 */}
<div className="login-loader-wrap" >
    <div className="loader"></div>
    <span>登录中</span>
</div>

这是css部分，

//登录loading加载动画
.login-loader-wrap {
    .loader {
        position: absolute;
        top: 40%;
        border-top: 0.3em solid rgba(0, 0, 0, 0.1);
        border-right: 0.3em solid rgba(0, 0, 0, 0.1);
        border-bottom: 0.3em solid rgba(0, 0, 0, 0.1);
        border-left: 0.3em solid #ee2223;
        -moz-transform: translateZ(0);
        -webkit-transform: translateZ(0);
        transform: translateY(40%);
        -moz-animation: loader 600ms infinite linear;
        -webkit-animation: loader 600ms infinite linear;
        animation: loader 600ms infinite linear;
        -moz-transition: all 600ms ease;
        -o-transition: all 600ms ease;
        -webkit-transition: all 600ms ease;
        transition: all 600ms ease;
        z-index: 9999;
    }
    .loader,
    .loader:after {
        border-radius: 50%;
        width: 2em;
        height: 2em;
    }
    > span {
        position: absolute;
        top: 45%;
        margin-left: -7px;
        font-weight: 400;
        font-size: 14px;
        color: #595959;
    }
}



@-webkit-keyframes loader {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
        border-left: 0.3em solid #ee2223;
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
        border-left: 0.3em solid #fc4c2f;
    }
}
@-moz-keyframes loader {
    0% {
        -moz-transform: rotate(0deg);
        transform: rotate(0deg);
        border-left: 0.3em solid #ee2223;
    }
    100% {
        -moz-transform: rotate(360deg);
        transform: rotate(360deg);
        border-left: 0.3em solid #fc4c2f;
    }
}
@keyframes loader {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
        border-left: 0.3em solid #ee2223;
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
        border-left: 0.3em solid #fc4c2f;
    }
}

最终的效果，

 需要注意的是，css样式有一部分没有传全，自己自行修改定位position属性，

 另外给大家推荐一下这个网站，

jquery源码在线运行

 一些样式，我们只需要好好的修改一下源码就可以了。