Ajax Style Loading Animation in CSS3 ( no Images )
by nikesh on 07/05/10 at 9:43 pm
After Social Icons and CSS button , you guys need some Ajax style loading images , don’t you ?
As we all know loading images are very essential part of any website , but some time loading images takes time to load itself. But what if the images made up in CSS. So this time I used CSS3 to develop Ajax style loading animation.
Below I have attached the snapshot , to view the original output please visit DEMO.
Now let go through the code.
Facebook style
HTML
<div id='facebook' >
<div id='block_1' class='facebook_block'></div>
<div id='block_2' class='facebook_block'></div>
<div id='block_3' class='facebook_block'></div>
</div>
CSS
#facebook{
margin-top:30px;
float:left;
}
.facebook_block{
background-color:#9FC0FF;
border:2px solid #3B5998;
float:left;
height:30px;
margin-left:5px;
width:8px;
opacity:0.1;
-webkit-transform:scale(0.7);
-webkit-animation-name: facebook;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: linear;
}
#block_1{
-webkit-animation-delay: .3s;
}
#block_2{
-webkit-animation-delay: .4s;
}
#block_3{
-webkit-animation-delay: .5s;
}
@-webkit-keyframes facebook{
0%{-webkit-transform: scale(1.2);opacity:1;}
100%{-webkit-transform: scale(0.7);opacity:0.1;}
}
here I have given only facebook style loading image source code.Hope you guys like these loading animations.Please don’t forget to drop your comments.
Jonas Westerman
May 7th, 2010
I like experimenting with these techniques because they save bandwidth when compared to images and between crazy Javascript animations and even some CSS animations you can replicate basically 95% of what Flash gives you in a very lightweight manner. We’re using a lot of these techniques in version 2 of the DirtyPhoneBook which is looking 100% hotter than the current one. The current site is fast but the newer one is blazing.
It’s just unfortunate that browser support is still a little spotty but I don’t really care about IE6 anymore so I don’t mind dropping that at all at this time.
Ajax Style Loading Animation in CSS3 ( no Images ) | Nikesh … | Programming Blog Imagik.org
May 7th, 2010
[...] rest is here: Ajax Style Loading Animation in CSS3 ( no Images ) | Nikesh … No [...]
Ajax Style Loading Animation in CSS3 ( no Images ) | Nikesh … « 技術者派遣の技術日誌ブログ
May 8th, 2010
[...] Go here to see the original: Ajax Style Loading Animation in CSS3 ( no Images ) | Nikesh … [...]
nursing schools
May 8th, 2010
What a great resource!
nikesh
May 8th, 2010
@Jonas … thanks bro .. and good luck to DirtyPhoneBook … nd frankly saying now a days who really cares about IE6 … at-least not you and me …
TomPier
May 8th, 2010
great post as usual!
mbt shoes
May 11th, 2010
thanks for great informations It’s a wonderful
vinyll
May 11th, 2010
Code is quite similar to actionscript 3 mxml animations, but shorter code, more explicit and readable.
That great news things can now work that way.
forex robot
May 12th, 2010
Terrific work! This is the type of information that should be shared around the web. Shame on the search engines for not positioning this post higher!
nikesh
May 12th, 2010
Thanks for your words Forex…
scrumpyjack
May 16th, 2010
I was literally just thinking about doing something like this yesterday! Now I don’t have to!
Thanks so much, I will be sure to try these out!
Michael Pehl
May 16th, 2010
Nice work, dude.
I hope all major browsers will support css3 very soon.
I dropped IE6 even in my commercial projects. DIE IE6, DIE!
Vivek
May 17th, 2010
Buddy, you are going from Awesomeness to OverAwesomeness with your CSS3 Skills, loved your this post and also thanks for unraveling the magic that css3 can bring to the web , Wish all the major browsers start supporting css3 soon .
Sexy Image Hover Effects using CSS3
May 17th, 2010
[...] First of all thanks to giving me a great response on Ajax Style Loading Animation in CSS3 ( no Images ) . [...]
David
May 18th, 2010
This is super-awesome!
Jeff Dickey
May 18th, 2010
Completely fails in Opera 10.53/Mac; try having a look at http://dev.opera.com/articles/view/css3-transitions-and-2d-transforms/ — it seems that they’re using (mostly) the “W3C” versions of the style names, with only a few “o-*” styles left over.
Luffy
May 19th, 2010
= ) Actually, I always test for CSS3 for general broswers. It can’t help waiting for CSS3 standardize in all broswers. Anyway, I love this trick.
Andy
Jun 18th, 2010
Nicely done, although as a whole I remain wary of this recent trend to ‘do things without using images’, particularly when a solution relies on extra markup.
One might argue that this approach blurs the principle of separating content from presentation and distracts from using HTML purely as a means to structure content.