box-shadow + animation 实现loading

.loading{ width:3px; height:3px; border-radius:100%; margin-left:20px;
box-shadow:0 -10px 0 1px #333,10px 0px #333,0 10px #333,-10px 0 #333,-7px -7px 0 .5px #333,7px -7px 0 1.5px #333,7px 7px #333,-7px 7px #333;}
.spin{
-webkit-transform: rotate(360deg);
-webkit-animation:spin 1s linear infinite;
}
@-webkit-keyframes spin{
from{-webkit-transform:rotate(0deg);}
to{-webkit-transform:rotate(360deg);}
}
.spin{
transform: rotate(360deg);
animation:spin 1s linear infinite;
}
@keyframes spin{
from{transform:rotate(0deg);}
to{transform:rotate(360deg);}
}

 

无限循环的CSS都是使用 spin 作为类名以及动画关键字，约定俗成的使用