css样式|css动画----loading加载动画原生|loading加载动画|jquery

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

{/* 登录时loading加载动画 */}登录中

【css样式|css动画----loading加载动画】这是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; } }

最终的效果，