原文:

今天我们要来介绍一款效果很特别的HTML5 Loading加载动画，不像其他的Loading动画，这款Loading动画颜色很丰富，并且在转圈的时候还有淡入淡出的效果。每一个圆环不停地旋转，从而实现加载动画的效果。首先你可以看看效果演示：

你也可以在这里查看

下面分享一下这款HTML5 Loading动画的实现过程，主要是HTML代码和CSS3代码，以及初始化的JS代码。

首先是HTML代码，只定义一个Loading容器，非常简单。

HTML代码：

接下来是CSS代码，主要是定义每一个圆圈的动画效果：

CSS代码：

@-webkit-keyframes spin {
     from {    -webkit-transform: rotate(360deg);    transform: rotate(360deg);  }  to {
       -webkit-transform: rotate(0deg);    transform: rotate(0deg);  }}@keyframes spin {
     from {    -webkit-transform: rotate(360deg);    transform: rotate(360deg);  }  to {
       -webkit-transform: rotate(0deg);    transform: rotate(0deg);  }}@-webkit-keyframes osc {
     0% {    -webkit-transform: scale(0.5);    transform: scale(0.5);    opacity: 0;  }  50% {
       -webkit-transform: scale(1.5);    transform: scale(1.5);    opacity: 1;  }  100% {
       -webkit-transform: scale(0.5);    transform: scale(0.5);    opacity: 0;  }}@keyframes osc {
     0% {    -webkit-transform: scale(0.5);    transform: scale(0.5);    opacity: 0;  }  50% {
       -webkit-transform: scale(1.5);    transform: scale(1.5);    opacity: 1;  }  100% {
       -webkit-transform: scale(0.5);    transform: scale(0.5);    opacity: 0;  }}@-webkit-keyframes rainbow {
     0% {    background: #df2020;  }  25% {
       background: #80df20;  }  50% {
       background: #20dfdf;  }  75% {
       background: #7f20df;  }  100% {
       background: #df2020;  }}@keyframes rainbow {
     0% {    background: #df2020;  }  25% {
       background: #80df20;  }  50% {
       background: #20dfdf;  }  75% {
       background: #7f20df;  }  100% {
       background: #df2020;  }}

最后调用JS实现Loading动画的圆圈不停地转动，并且使圆圈的颜色发生周期性的渐变。

JS代码如下：

var num = 7,    ang = 360/num,    rad = num*5;function setup(){  for(var i=0; i

怎么样，这款HTML5 Loading动画还不错吧。

另外还有几个不错的Loading动画推荐一下，像这款类似和这款基于都非常不错。最后提供一下这款HTML5 五彩Loading的源代码：