有时候我们在做项目的时候会加入一些动画来表示正在加载，正在运行等状态。
对于我这种野路子而言，完全自己写一套动画是绝对不可能的，于是就找到了这个叫做SpinKit的项目。
SpinKit提供了多种loading动画效果，它使用硬件加速创建平滑的CSS动画，你也可以轻松定制你需要的动画效果 。
SpinKit的使用方法简直不要太简单，首先引用css
<link rel="stylesheet" type="text/css" href="spinkit.css">
然后在页面适当地方插入你需要的动画效果代码即可。
动画效果代码：
Plane
<div class="sk-plane"></div>
Chase
<div class="sk-chase"> <div class="sk-chase-dot"></div> <div class="sk-chase-dot"></div> <div class="sk-chase-dot"></div> <div class="sk-chase-dot"></div> <div class="sk-chase-dot"></div> <div class="sk-chase-dot"></div> </div>
Bounce
<div class="sk-bounce"> <div class="sk-bounce-dot"></div> <div class="sk-bounce-dot"></div> </div>
Wave
<div class="sk-wave"> <div class="sk-wave-rect"></div> <div class="sk-wave-rect"></div> <div class="sk-wave-rect"></div> <div class="sk-wave-rect"></div> <div class="sk-wave-rect"></div> </div>
Pulse
<div class="sk-pulse"></div>
Flow
<div class="sk-flow"> <div class="sk-flow-dot"></div> <div class="sk-flow-dot"></div> <div class="sk-flow-dot"></div> </div>
Swing
<div class="sk-swing"> <div class="sk-swing-dot"></div> <div class="sk-swing-dot"></div> </div>
Circle
<div class="sk-circle"> <div class="sk-circle-dot"></div> <div class="sk-circle-dot"></div> <div class="sk-circle-dot"></div> <div class="sk-circle-dot"></div> <div class="sk-circle-dot"></div> <div class="sk-circle-dot"></div> <div class="sk-circle-dot"></div> <div class="sk-circle-dot"></div> <div class="sk-circle-dot"></div> <div class="sk-circle-dot"></div> <div class="sk-circle-dot"></div> <div class="sk-circle-dot"></div> </div>
Circle Fade
<div class="sk-circle-fade"> <div class="sk-circle-fade-dot"></div> <div class="sk-circle-fade-dot"></div> <div class="sk-circle-fade-dot"></div> <div class="sk-circle-fade-dot"></div> <div class="sk-circle-fade-dot"></div> <div class="sk-circle-fade-dot"></div> <div class="sk-circle-fade-dot"></div> <div class="sk-circle-fade-dot"></div> <div class="sk-circle-fade-dot"></div> <div class="sk-circle-fade-dot"></div> <div class="sk-circle-fade-dot"></div> <div class="sk-circle-fade-dot"></div> </div>
Grid
<div class="sk-grid"> <div class="sk-grid-cube"></div> <div class="sk-grid-cube"></div> <div class="sk-grid-cube"></div> <div class="sk-grid-cube"></div> <div class="sk-grid-cube"></div> <div class="sk-grid-cube"></div> <div class="sk-grid-cube"></div> <div class="sk-grid-cube"></div> <div class="sk-grid-cube"></div> </div>
Fold
<div class="sk-fold"> <div class="sk-fold-cube"></div> <div class="sk-fold-cube"></div> <div class="sk-fold-cube"></div> <div class="sk-fold-cube"></div> </div>
Wander
<div class="sk-wander"> <div class="sk-wander-cube"></div> <div class="sk-wander-cube"></div> <div class="sk-wander-cube"></div> </div