HTML5 colorful ring Loading animation implementation tutorial,

HTML5 colorful ring Loading animation implementation tutorial,

Today, we will introduce a particularly effective HTML5 Loading animation. Unlike other Loading animations, this Loading animation has rich colors, in addition, there is a fade-in and fade-out effect in the circle. Each ring is rotated continuously to load the animation. First, you can see the effect demonstration:

You can also view online demos here

Next we will share the implementation process of this HTML5 Loading animation, mainly HTML code, CSS3 code, and initialized JS Code.

The first is the HTML code. It is very simple to define only one Loading container.

HTML code:

<div id=”hold”></div>

The following is the CSS code, which mainly defines the animation effect of each circle:

CSS code:

@-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;  }}

Finally, JS is called to realize the constant rotation of the Loading animation circle, and the color of the circle changes cyclically.

The JS Code is as follows:

var num = 7,    ang = 360/num,    rad = num*5;function setup(){  for(var i=0; i<num; 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);  }}

How about this HTML5 Loading animation.

In addition, we recommend some good Loading animations, such as the pure CSS3 Loading animation similar to the engine effect and the jQuery-based custom Loading animation. Finally, we provide the source code of this HTML5 colorful Loading: source code download>