Ajax Style Loading Animation in CSS3 ( no Images )

by 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.

Loading Images

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.

49 Responses to “Ajax Style Loading Animation in CSS3 ( no Images )”

  1. 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.

  2. [...] rest is here: Ajax Style Loading Animation in CSS3 ( no Images ) | Nikesh … No [...]

  3. [...] Go here to see the original: Ajax Style Loading Animation in CSS3 ( no Images ) | Nikesh … [...]

  4. nursing schools

    May 8th, 2010

    What a great resource!

  5. 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 … :P

  6. TomPier

    May 8th, 2010

    great post as usual!

  7. mbt shoes

    May 11th, 2010

    thanks for great informations It’s a wonderful

  8. 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.

  9. 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!

  10. 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! :)

  11. 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! ;)

  12. 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 .

  13. [...] First of all thanks to giving me a great response on Ajax Style Loading Animation in CSS3 ( no Images ) . [...]

  14. David

    May 18th, 2010

    This is super-awesome!

  15. 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.

  16. 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.

  17. 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.

  18. jayant kaushik

    Dec 1st, 2010

    hlo nikesh,
    m very new to css n i hav embeded a Google Map in a page of my website. So i want dat first transition effect “blocks revolving in a circle”
    to appear b4 the map loads
    however, i tried to put it d way u wrote above, but i can still see dat Lodaing Block icon above the map !
    how can i hide it after d map loads ???
    thnx

    • nikesh

      Dec 1st, 2010

      @jayant … u just need to check when your map loads completely.. and as the map loads completely you need to set the loading image div style visible to hidden or display:none…

      • jayant kaushik

        Dec 1st, 2010

        yeah thnx but as i told u dat m new to css
        so it would be better if u gimme d whole command i should type in d notepad :)
        i typed dis :

        but dat facebook loader dosent dissapears :(

  19. Loading APNG & GIF

    Sep 4th, 2011

    Amazing thing. I am thinking of creating a css loading animation generator on http://preloaders.net soon. Thank you for the idea :)

  20. Loading APNG & GIF

    Sep 4th, 2011

    Is there any way to make this work in firefox?

  21. [...] новый генератор меня вдохновила статья одного блога. Получив разрешение от создателя блога на [...]

  22. [...] новый генератор меня вдохновила статья одного блога. Получив разрешение от создателя блога на [...]

  23. raydenxxx

    Oct 25th, 2011

    Don’t know who stole who… but it seems to be the same things

    http://cssload.net/

    From a generator…

  24. saeedlali

    Jan 4th, 2012

    Great…. ty ..

  25. quess

    Jan 18th, 2012

    The demo it’s not working under firefox 9 in ubuntu 11.10.
    :(

  26. D. Baser

    Feb 24th, 2012

    for webkit only = pretty much worthless at this point in time.

  27. Kavitkar uttam

    Apr 22nd, 2012

    Good Job it useful for newer web developer like me

  28. elva

    Jun 18th, 2012

    thanks,it’s wonderful

  29. [...] Demo – Tutorial [...]

  30. Surya

    Sep 20th, 2012

    It is not working in Internet explorer

    • Mark Hughes

      May 2nd, 2013

      IE 10+ is required.

      • Mark Hughes

        May 2nd, 2013

        Oh, also, needs to use the -ms- tags and the no-tags version of it. Might want to add support for version of opera (new versions not required) using -o-, and -moz for FireFox too, right?

        This is only a WebKit example it appears!

  31. daniel

    Feb 12th, 2013

    Thanks man, this code works well ….

  32. [...] Demo – Tutorial [...]

  33. [...] 4. Ajax 风格的加载动画(无需图片) 图片是网站中非常重要的部分,如果使用gif图片作为加载动画,则需要在载入网站图片的同时先载入gif动画图片。如果使用 CSS,这种问题就迎刃而解了。因此推荐用 CSS3 来开发 Ajax 风格的加载动画。 [...]

  34. [...] Ajax Style Loading Animation in CSS3 (no Images) [...]

  35. [...] 4. Ajax 风格的加载动画(无需图片) 图片是网站中非常重要的部分,如果使用gif图片作为加载动画,则需要在载入网站图片的同时先载入gif动画图片。如果使用 CSS,这种问题就迎刃而解了。因此推荐用 CSS3 来开发 Ajax 风格的加载动画。 [...]

  36. [...] request, the script would return the assoсiated e-mail address, in what was apрarently can be an AJAXstyle response the next Wеb applіcation. http://www.traxxcorp.com/michaelkors-Outlet.html VN:R_U [...]

Leave a Reply