如何取消html加载的圆圈,HTML5 Loading动画加载 五彩的圆环Loading

本文作者html5tricks，转载请注明出处

今天我们要分享一款基于

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

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

接下来是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

var button = document.createElement('div');

button.className = "dot"+i+" dot";

button.style.top = rad*Math.cos(ang*i*Math.PI/180)-10+"px";

button.style.left = rad*Math.sin(ang*i*Math.PI/180)-10+"px";

button.style.backgroundColor = "hsla("+ang*i+", 50%, 50%, 1)";

button.style.webkitAnimation =

"osc 2s ease-in-out infinite "+i/(num/2)+"s, rainbow 8s infinite "+i/(num/2)+"s";

button.style.animation =

"osc 2s ease-in-out infinite "+i/(num/2)+"s, rainbow 8s infinite "+i/(num/2)+"s, spin 1s infinite";

document.getElementById("hold").appendChild(button);

}

}

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