LODING 3D TEXT ANIMATION CSS3

.color_loder { width:550px; height:500px; margin:10px auto 0;}
.disqus-loader { animation:disqus-embed-spinner 3s infinite linear; -webkit-animation:disqus-embed-spinner 3s infinite linear}
@keyframes disqus-embed-spinner { 0%{transform:rotate(0deg)} 100%{transform:rotate(360deg)} }
.disqus-loader1 { animation:disqus-embed-spinner1 4s infinite linear; -webkit-animation:disqus-embed-spinner1 4s infinite linear}
@keyframes disqus-embed-spinner1 { 0%{transform:rotate(0deg)} 100%{transform:rotate(-360deg)}}
@-webkit-keyframes disqus-embed-spinner{0%{-webkit-transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg)}}
#spinningTextG { width:500px; height:undefinedpx; margin:50px 10px 0 0; position:absolute;}
.spinningTextG { color:#000000; font:bold 100px Arial, Helvetica, sans-serif; text-decoration:none; float:left;
-moz-animation-name:bounce_spinningTextG; -moz-animation-duration:1.3s; -moz-animation-iteration-count:infinite; -moz-animation-direction:linear;
-moz-transform:scale(.3); -webkit-animation-name:bounce_spinningTextG; -webkit-animation-duration:1.3s; -webkit-animation-iteration-count:infinite;
-webkit-animation-direction:linear; -webkit-transform:scale(.3); -ms-animation-name:bounce_spinningTextG; -ms-animation-duration:1.3s;
-ms-animation-iteration-count:infinite; -ms-animation-direction:linear; -ms-transform:scale(.3); -o-animation-name:bounce_spinningTextG;
-o-animation-duration:1.3s; -o-animation-iteration-count:infinite; -o-animation-direction:linear; -o-transform:scale(.3); animation-name:bounce_spinningTextG;
animation-duration:1.3s; animation-iteration-count:infinite; animation-direction:linear; transform:scale(.3);
text-shadow:rgb(187, 187, 187) 0px 1px 0px, rgb(181, 181, 181) 0px 2px 0px, rgb(172, 172, 172) 0px 3px 0px, rgb(160, 160, 160) 0px 4px 0px, rgb(145, 145, 145) 0px 5px 0px, rgb(127, 127, 127) 0px 6px 0px, rgba(0, 0, 0, 0.199219) 0px 7px 1px, rgba(0, 0, 0, 0.296875) 0px 8px 6px;}
#spinningTextG_1{ -moz-animation-delay:0.52s; -webkit-animation-delay:0.52s; -ms-animation-delay:0.52s; -o-animation-delay:0.52s; animation-delay:0.52s; }
#spinningTextG_2{ -moz-animation-delay:0.65s; -webkit-animation-delay:0.65s; -ms-animation-delay:0.65s; -o-animation-delay:0.65s; animation-delay:0.65s; }
#spinningTextG_3{ -moz-animation-delay:0.78s; -webkit-animation-delay:0.78s; -ms-animation-delay:0.78s; -o-animation-delay:0.78s; animation-delay:0.78s; }
#spinningTextG_4{ -moz-animation-delay:0.91s; -webkit-animation-delay:0.91s; -ms-animation-delay:0.91s; -o-animation-delay:0.91s; animation-delay:0.91s; }
#spinningTextG_5{ -moz-animation-delay:1.04s; -webkit-animation-delay:1.04s; -ms-animation-delay:1.04s; -o-animation-delay:1.04s; animation-delay:1.04s; }
#spinningTextG_6{ -moz-animation-delay:1.17s; -webkit-animation-delay:1.17s; -ms-animation-delay:1.17s; -o-animation-delay:1.17s; animation-delay:1.17s; }
#spinningTextG_7{ -moz-animation-delay:1.3s; -webkit-animation-delay:1.3s; -ms-animation-delay:1.3s; -o-animation-delay:1.3s; animation-delay:1.3s; }
#spinningTextG_8{ -moz-animation-delay:1.43s; -webkit-animation-delay:1.43s; -ms-animation-delay:1.43s; -o-animation-delay:1.43s; animation-delay:1.43s; }
#spinningTextG_9{ -moz-animation-delay:1.56s; -webkit-animation-delay:1.56s; -ms-animation-delay:1.56s; -o-animation-delay:1.56s; animation-delay:1.56s; }
#spinningTextG_10{ -moz-animation-delay:1.69s; -webkit-animation-delay:1.69s; -ms-animation-delay:1.69s; -o-animation-delay:1.69s; animation-delay:1.69s; }
@-webkit-keyframes bounce_spinningTextG{ 0%{ -webkit-transform:scale(1); color:#06F; } 100%{ -webkit-transform:scale(.3) rotate(90deg); color:#f00; } }
@-ms-keyframes bounce_spinningTextG{ 0%{ -ms-transform:scale(1); color:#06F; } 100%{ -ms-transform:scale(.3) rotate(90deg); color:#f00; } }
@-o-keyframes bounce_spinningTextG{ 0%{ -o-transform:scale(1); color:#06F; } 100%{ -o-transform:scale(.3) rotate(90deg); color:#f00; } }
@-moz-keyframes bounce_spinningTextG{ 0%{ -moz-transform:scale(1.2); color:#06F; } 100%{ -moz-transform:scale(.5) rotate(90deg); color:#f00; } }
@keyframes bounce_spinningTextG{ 0%{ transform:scale(1.2); color:#06F; } 100%{ transform:scale(.5) rotate(90deg); color:#f00; } }

<div class="color_loder">
<div style="margin:0 auto; width:200px;">
<div class="disqus-loader1" style="width:96px; height:96px; overflow:hidden; background:url(circle1.png) no-repeat; position:absolute;"></div>
<div class="disqus-loader" style="width:50px; height:50px; margin:23px; transform-origin:center center 0px; background:url(circle2.png) no-repeat; z-index:-1;
position:absolute;"></div>
</div>
<div id="spinningTextG" style="clear:both; margin-top:100px;">
<div id="spinningTextG_1" class="spinningTextG">L</div>
<div id="spinningTextG_2" class="spinningTextG">o</div>
<div id="spinningTextG_3" class="spinningTextG">a</div>
<div id="spinningTextG_4" class="spinningTextG">d</div>
<div id="spinningTextG_5" class="spinningTextG">i</div>
<div id="spinningTextG_6" class="spinningTextG">n</div>
<div id="spinningTextG_7" class="spinningTextG">g</div>
<div id="spinningTextG_8" class="spinningTextG">.</div>
<div id="spinningTextG_9" class="spinningTextG">.</div>
<div id="spinningTextG_10" class="spinningTextG">.</div>
</div>
</div>

Tagged in:

• loading css
• loading animation
• text loding css3
• loding text anomatio