效果查看：https://jsfiddle.net/rubys/je16qL5k/6/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css animation</title>
<style>
body {
background-color: gray;
}
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } }
.preloader {
animation-name: spin;
animation-duration: .5s;
animation-timing-function: linear;
-webkit-animation-delay: 0s;
animation-animation-delay: 0s;
animation-iteration-count: infinite;
animation-direction: normal;
animation-fill-mode: none;
animation-play-state: running;
border: 2px solid transparent;
border-top: 2px solid #fff;
border-left: 2px solid #fff;
border-radius: 50px;
opacity: 1;
width: 32px;
height: 32px;
cursor: wait;
display: block;
transition: all 400ms ease !important;
-webkit-animation: spin .6s linear infinite;
-o-animation: spin .6s linear infinite;
animation: spin .6s linear infinite;
}
#animation {
}
</style>
</head>
<body>
<div id="animation" class="preloader"></div>
</body>
</html>
