HTML5 multicolored ring loading loading animation Implementation Tutorial

Today we are going to introduce a very special effect of the HTML5 loading loading animation, unlike other loading animation, this loading animation color is very rich, and in the circle when there is a fading effect. Each circle rotates continuously to achieve the effect of loading the animation. First you can look at the effect demo:

You can also view the online demo here

Let's share the implementation of this HTML5 loading animation, mainly the HTML code and CSS3 code, as well as the initialization of the JS code.

The first is the HTML code, which defines only one loading container, which is very simple.

HTML code:

<id= "Hold"></div>

Next is the CSS code, which basically defines the animation effect for 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; }}

The last call to JS implementation of the loading animation circle constantly rotating, and the color of the circle has a periodic gradient.

The JS code is as follows:

varnum = 7, Ang= 360/num, rad = num*5;functionSetup () { for(vari=0; i<num; i++){    varbutton = 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); }}

Well, this HTML5 loading animation is not bad.

There are also a few nice loading animations to recommend, like this engine-like pure CSS3 loading animation and this jquery-based custom loading animation are very good. Finally provide the source code of this HTML5 multicolored loading: Source Download >>