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.
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
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
Loading APNG & GIF
Sep 4th, 2011
Is there any way to make this work in firefox?
Стартапы / Генератор анимированных CSS для загрузки « Зеркало IT индуст
Sep 7th, 2011
[...] новый генератор меня вдохновила статья одного блога. Получив разрешение от создателя блога на [...]
Стартапы / Генератор анимированных CSS для загрузки by SOS Admin!
Sep 7th, 2011
[...] новый генератор меня вдохновила статья одного блога. Получив разрешение от создателя блога на [...]
raydenxxx
Oct 25th, 2011
Don’t know who stole who… but it seems to be the same things
http://cssload.net/
From a generator…
nikesh
Oct 26th, 2011
Thanks for mentioning … but no one stole anyone … i gave him permission to use my work … check this out http://cssload.net/contact_us
saeedlali
Jan 4th, 2012
Great…. ty ..
quess
Jan 18th, 2012
The demo it’s not working under firefox 9 in ubuntu 11.10.
D. Baser
Feb 24th, 2012
for webkit only = pretty much worthless at this point in time.
10 CSS3 and jQuery Loading Animations Solutions | jQuery4u
Feb 28th, 2012
[...] Source Demo [...]
【翻译】10 个基于CSS3/jQuery的加载动画设计方案 | WEB 前端学习
Mar 3rd, 2012
[...] 源码 [...]
10 个基于CSS3/jQuery的加载动画设计方案 | 引领人生
Mar 12th, 2012
[...] 源码 / 演示 [...]
Kavitkar uttam
Apr 22nd, 2012
Good Job it useful for newer web developer like me
10个基于CSS3/jQuery的加载动画设计方案 @ Effy的博客
Apr 25th, 2012
[...] 源码 / 演示 [...]
elva
Jun 18th, 2012
thanks,it’s wonderful
12 Free jQuery Pre-Loader Plugins
Jul 27th, 2012
[...] Demo – Tutorial [...]
» 12 Jquery Preload per i vostri progetti - PYG studio
Jul 30th, 2012
[...] Demo – Tutorial [...]
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!
10个基于CSS3/jQuery的加载动画设计方案 – 90互联网数据中心
Oct 19th, 2012
[...] 源码 / 演示 [...]
10 个基于CSS3/jQuery的加载动画设计方案 | jQuery精品集 - macapps.asia
Feb 4th, 2013
[...] 源码 / 演示 [...]
daniel
Feb 12th, 2013
Thanks man, this code works well ….
10+ Free jQuery Preloader Plugins
Feb 12th, 2013
[...] Demo – Tutorial [...]
10个基于CSS3/jQuery的加载动画设计方案 | 渴切切图
Apr 23rd, 2013
[...] 4. Ajax 风格的加载动画(无需图片) 图片是网站中非常重要的部分，如果使用gif图片作为加载动画，则需要在载入网站图片的同时先载入gif动画图片。如果使用 CSS，这种问题就迎刃而解了。因此推荐用 CSS3 来开发 Ajax 风格的加载动画。 [...]
Various css3 jQuery Loading AnimationsWordpress Developent Websoite
Jun 13th, 2013
[...] Ajax Style Loading Animation in CSS3 (no Images) [...]
10个基于CSS3/jQuery的加载动画设计方案 | 切图网(qietu.com)
Nov 10th, 2013
[...] 4. Ajax 风格的加载动画(无需图片) 图片是网站中非常重要的部分，如果使用gif图片作为加载动画，则需要在载入网站图片的同时先载入gif动画图片。如果使用 CSS，这种问题就迎刃而解了。因此推荐用 CSS3 来开发 Ajax 风格的加载动画。 [...]
Tvl Comparable Tone Dome Windle | PokerFund
Jan 2nd, 2014
[...] 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 [...]
aamir
Apr 1st, 2014
Nice One
10 CSS3 and jQuery Loading Animations Solutions | jQuery4U | No.1 Resource for jQuery Developers
Apr 22nd, 2014
[…] Source Demo […]
richard
Apr 28th, 2014
Thanks buddy!
10个漂亮的CSS3+jQuery的Loading加载条动画设计插件 | MOT
Jun 12th, 2014
[…] 4. Ajax 风格的加载动画(无需图片) […]