CSS3 Loading:3 Beautiful CSS3 Loading animated example tutorial

Html
The 1th example of the HTML tag is very simple, we created a UL list tag on the page, and created several div inside it to control its overall progress animation, the code is as follows:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21st 22

<ul id= "Progress" > <li> <div id= "Layer1" class= "Ball" ></div> <!--layer1 control delay Animation/ball are effect--> <div id= "Layer7" class= "Pulse" ></div> <!--layer7 control delay animation/pulse are effect--> </li> <li> <div id= "Layer2" class= "Ball" ></div> <div id= "Layer8" class= "Pulse" ></div> </li> <li> <div id= "Layer3" class= "Ball" ></div> <div id= "Layer9" class= "Pulse" ></div> </li> <li> <div id= "Layer4" class= "Ball" ></div> <div id= "Layer10" class= "Pulse" ></div> </li> <li> <div id= "Layer5" class= "Ball" ></div> <div id= "Layer11" class= "Pulse" ></div> </li> </ul>

Css
No different, we just create a graphical animation for the UL mark, please note the Special animation effect in the middle process, this effect is thanks to the CSS3 delay animation features, CSS code as follows:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21st 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89

ul#progress { List-style:none; width:125px; margin:0 Auto; padding-top:50px; padding-bottom:50px; } Ul#progress Li {/* Style your list * * Float:left; position:relative; width:15px; height:15px; border:1px solid #fff; border-radius:50px; margin-left:10px; border-left:1px solid #111; border-top:1px solid #111; border-right:1px solid #333; border-bottom:1px solid #333; Background: #000; } Ul#progress li:first-child {margin-left:0} * * Remove the margin . Ball {/* Style your ball and set the animation * * Background-color: #2187e7; Background-image:-moz-linear-gradient (90deg, #2187e7 25%, #a0eaff); Background-image:-webkit-linear-gradient (90deg, #2187e7 25%, #a0eaff); width:15px; height:15px; border-radius:50px; -moz-transform:scale (0); -webkit-transform:scale (0); -moz-animation:loading 1s linear forwards; -webkit-animation:loading 1s linear forwards; } . Pulse {/* Style your second ball to create the amazing effects * * width:15px; height:15px; border-radius:30px; border:1px solid #00c6ff; box-shadow:0 0 5px #00c6ff; Position:absolute; top:-1px; left:-1px; -moz-transform:scale (0); -webkit-transform:scale (0); -webkit-animation:pulse 1s ease-out; -moz-animation:pulse 1s ease-out; } /* Control Layers */ #layer1 {-moz-animation-delay:0.5s;-webkit-animation-delay:0.5s;} #layer2 {-moz-animation-delay:1s;-webkit-animation-delay:1s;} #layer3 {-moz-animation-delay:1.5s;-webkit-animation-delay:1.5s;} #layer4 {-moz-animation-delay:2s;-webkit-animation-delay:2s;} #layer5 {-moz-animation-delay:2.5s;-webkit-animation-delay:2.5s;} #layer7 {-moz-animation-delay:1.5s;-webkit-animation-delay:1.5s;} #layer8 {-moz-animation-delay:2s;-webkit-animation-delay:2s;} #layer9 {-moz-animation-delay:2.5s;-webkit-animation-delay:2.5s;} #layer10 {-moz-animation-delay:3s;-webkit-animation-delay:3s;} #layer11 {-moz-animation-delay:3.5s;-webkit-animation-delay:3.5s;} @-moz-keyframes Loading { 0%{-moz-transform:scale (0,0);} 100%{-moz-transform:scale (1,1);} } @-webkit-keyframes Loading { 0%{-webkit-transform:scale (0,0);} 100%{-webkit-transform:scale (1,1);} } @-moz-keyframes Pulse { 0% {-moz-transform:scale (0); opacity:0;} 10% {-moz-transform:scale (1); opacity:0.5;} 50% {-moz-transform:scale (1.75); opacity:0;} 100% {-moz-transform:scale (0); opacity:0;} } @-webkit-keyframes Pulse { 0% {-webkit-transform:scale (0); opacity:0;} 10% {-webkit-transform:scale (1); opacity:0.5;} 50% {-webkit-transform:scale (1.75); opacity:0;} 100% {-webkit-transform:scale (0); opacity:0;} }

2nd CSS3 Loading Animation example
Html
In the 2nd example, we'll create a loading progress bar, just to create a container with a width of 100%, and then put a span tag with class expand in it, and the CSS3 animation progress bar can gradually fill the entire screen with the following code:

1 2 3

<div id= "Content" > <span class= "Expand" ></span> </div>

Css
This style looks a lot simpler than the previous one, which is the most basic setting and you can change it according to your needs.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21st 22 23 24 25 26 27 28

#content { width:100%; /* Full Width * * height:5px; margin:50px Auto; Background: #000; } . expand { width:100%; height:1px; MARGIN:2PX 0; Background: #2187e7; Position:absolute; box-shadow:0px 0px 10px 1px rgba (0,198,255,0.7); -moz-animation:fullexpand 10s ease-out; -webkit-animation:fullexpand 10s ease-out; } /* Full Width Animation Bar * * @-moz-keyframes Fullexpand { 0% {width:0px;} 100%{width:100%;} } @-webkit-keyframes Fullexpand { 0% {width:0px;} 100%{width:100%;} }

3rd CSS3 Loading Animation example
Html
In the last example, we recreated the loading progress bar using the Opacity property, where we will control the exact animation timing with the control layer.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21st 22 23 24 25 26 27 28 29 30 31 32

<ul id= "Loadbar" > <li> <div id= "layerFill1" class= "Bar" ></div> <!--control Layer + Bar--> </li> <li> <div id= "layerFill2" class= "Bar" ></div> </li> <li> <div id= "LayerFill3" class= "Bar" ></div> </li> <li> <div id= "LayerFill4" class= "Bar" ></div> </li> <li> <div id= "layerFill5" class= "Bar" ></div> </li> <li> <div id= "layerFill6" class= "Bar" ></div> </li> <li> <div id= "LayerFill7" class= "Bar" ></div> </li> <li> <div id= "LayerFill8" class= "Bar" ></div> </li> <li> <div id= "LayerFill9" class= "Bar" ></div> </li> <li> <div id= "LayerFill10" class= "Bar" ></div> </li> </ul>

Css
You see the same effect as the 1th, but the important thing is that you know how to use CSS to make such wonderful effects.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21st 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50

Ul#loadbar { List-style:none; width:140px; margin:0 Auto; padding-top:50px; padding-bottom:75px; } Ul#loadbar Li { Float:left; position:relative; width:11px; height:26px; margin-left:1px; border-left:1px solid #111; border-top:1px solid #111; border-right:1px solid #333; border-bottom:1px solid #333; Background: #000; } Ul#loadbar li:first-child {margin-left:0;} . Bar { Background-color: #2187e7; Background-image:-moz-linear-gradient (45deg, #2187e7 25%, #a0eaff); Background-image:-webkit-linear-gradient (45deg, #2187e7 25%, #a0eaff); width:11px; height:26px; opacity:0; -webkit-animation:fill 5s linear forwards; -moz-animation:fill 5s linear forwards; } #layerFill1 {-moz-animation-delay:0.5s;-webkit-animation-delay:0.5s;} #layerFill2 {-moz-animation-delay:1s;-webkit-animation-delay:1s;} #layerFill3 {-moz-animation-delay:1.5s;-webkit-animation-delay:1.5s;} #layerFill4 {-moz-animation-delay:2s;-webkit-animation-delay:2s;} #layerFill5 {-moz-animation-delay:2.5s;-webkit-animation-delay:2.5s;} #layerFill6 {-moz-animation-delay:3s;-webkit-animation-delay:3s;} #layerFill7 {-moz-animation-delay:3.5s;-webkit-animation-delay:3.5s;} #layerFill8 {-moz-animation-delay:4s;-webkit-animation-delay:4s;} #layerFill9 {-moz-animation-delay:4.5s;-webkit-animation-delay:4.5s;} #layerFill10 {-moz-animation-delay:5s;-webkit-animation-delay:5s;} @-moz-keyframes Fill { 0%{opacity:0;} 100%{opacity:1;} } @-webkit-keyframes Fill { 0%{opacity:0;} 100%{opacity:1;} }

This article links http://www.cxybl.com/html/wyzz/CSS/20130705/38908.html