CSS3 loading spinners without images
While playing around with css-transform to make various shapes, I saw a way to create animated image-less loading spinners such as used in a lot of webapps and of course on the iPhone.
CSS transforms
CSS transform (in Firefox 3.5+ and Webkit-based browsers) has a whole bunch of interesting functions, such as rotation, translation, scaling and skewing. To learn more about the different functions, check out the Mozilla developer center overview of CSS transform. After playing around with chaining different transforms and seeing the effect, I found out something interesting:
transform:rotate(45deg) translate(0, -35px);If you rotate first, and then translate (move), it will move along the rotated axis. The above code translates a block to the top-right corner (45 degrees). (the gray div is not transformed while the black one is.)
Using this, I could rotate and translate a bunch of divs to create loading spinners (though this one doesn’t spin yet!):
In this example, each div is rotated an additional 45 degrees. The first one is not rotated, the second one is rotated 45 degrees, the one after that 90 degrees, and so forth. Additionally, each div has increased opacity to make it look like most loading spinners.
Animation
Webkit supports CSS animations, but these are continuous while most loading spinners are not. On the left side is a spinner animated with CSS animation (only works in Safari and Chrome), on the right there’s one animated with a small bit of JavaScript to look like regular loading spinners:
The code for the CSS animation is fairly straightforward:
#div2 {
-webkit-animation-name: rotateThis;
-webkit-animation-duration:2s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-timing-function:linear;
}
@-webkit-keyframes rotateThis {
from {-webkit-transform:scale(0.5) rotate(0deg);}
to {-webkit-transform:scale(0.5) rotate(360deg);}
} While the (quick and dirty) code for the JavaScript animation is pretty easy as well:
var count = 0;
function rotate() {
var elem2 = document.getElementById('div3');
elem2.style.MozTransform = 'scale(0.5) rotate('+count+'deg)';
elem2.style.WebkitTransform = 'scale(0.5) rotate('+count+'deg)';
if (count==360) { count = 0 }
count+=45;
window.setTimeout(rotate, 100);
}
window.setTimeout(rotate, 100);Someone else might be able to duplicate the loading spinner-style rotation with CSS animations (please let me know!), but the JavaScript solution looks better and works in Firefox too.
Going crazy with it (More examples!)
Once I had the basic ‘functionality’ working, I just decided to go crazy with it and create a whole bunch of different style loading spinners. You can find them on this page: CSS3 loading spinner examples.
Check out the source for the way to style the different spinners and let me know when you make interesting variations!
66 comments
Instead of rotating the squares, can’t you make them stationary and rotate some kind of semi-transparent circleish gradient over it? That way it won’t look as if they blocks are spinning, but only the color intensities…
The javascript example doesn’t go smooth in firefox (mine 3.6), this would be one of the rare occasions i would choose an animated gif over javascript.
G.- That would be because the performance of CSS3 transformations depends on the hardware. Using animated GIFs or PNGs, that wouldn’t be a problem.
But still this is a pretty damn cool technique if you ask me ;)
Nice one,
I’m stating to enjoy css3. Check my css-only RSS icon
http://modxrules.com/articles/scalable-css-only-rss-icon
[...] full post on Hacker News If you enjoyed this article, please consider sharing it! Tagged with: CSS3 • [...]
it isn’t possible to specify a degree amount to rotate? If you could specify a 45 degree rotation, the css spinner would look the same as the spinner on the right.
[...] CSS3 loading spinners without images Via / Script & Style [...]
It’s great but here is why I’ll use animated gif: CPU usage is too intensive.
which brings this….
CPU vendors of the world:
in the 80′s you made (math) co-processors,
in the 90′s you made graphic processors,
now you are just doing multi-core processors,
is not enough, create something really important!
Here is your multi-million dollar business:
Design a freaking coprocessor to aid web-browsers.
The web is becoming CPU intensive and the software javascript VM can’t give radically better experiences without better hardware.
Please, please, please, figure out how to build hardware for dynamic virtual machines like javascript. Everybody with a web browser will be buying from you if you do it.
Wow. really impressive.
<smartassery>Now can you do it with rounded corners?</smartassery>
heh, can’t you just animate the opacity of the rotated divs to get the right one JS-like effect ?
CSS3 loading spinners without images…
While playing around with css-transform to make various shapes, I saw a way to create animated image-less loading spinners such as used in a lot of webapps and of course on the iPhone….
[...] – Yes, CSS3 now fully supports CSS animation effects. For example, you could create one loading spinner without any images! Cool, really [...]
Looks cool. But there seems to be a problem. The rotation degree keeps increasing and if you leave the browser on for long enough, the rotation gets to like million degrees. You should have capped it at 360, then set it back to zero.
Kewl!! Im not sure if some of you guys are having the same problem… If i try to scroll my browser it lags .. freezes for just a few millisecond.. This is pretty innovative! Kewl!
[...] CSS3 Loading Spinners Without Images [...]
While this certainly looks cool I can’t find a single reason to ever use it. Sometimes we (as developers) are so focused on using new features instead of using the right features.
In this example it would make much more sense to just have one -element with a background-image and some text “Loading”. That way people with a screenreader would also know what’s happening…
I know that we need to eliminate as many images/server requests as possible, but using 12 empty divs just to make some fancy, cpu-heavy css3 animation doesn’t make sense to me.
However, it’s still a cool example, I just wouldn’t use it for this purpose :)
[...] Shared CSS3 loading spinners without images. [...]
Wow, this is very very cool! It’s very annoying to know that it will take time before all people using browsers that support CSS3. ;)
[...] CSS3 loading spinners without imagesCSS transform (in Firefox 3.5+ and Webkit-based browsers) has a whole bunch of interesting functions, such as rotation, translation, scaling and skewing. To learn more about the different functions, check out the Mozilla developer center overview of CSS transform. After playing around with chaining different transforms and seeing the effect, I found out something interesting:from Kilian Valkhof [...]
Hawt. ;)
You can get the spinners to avoid being continuous by only animating the step really quickly (for a .01% of the rotation time). Like so:
@-webkit-keyframes rotateThis {
0% {-webkit-transform:scale(0.5) rotate(0deg);}
12.5% {-webkit-transform:scale(0.5) rotate(0deg);}
12.51% {-webkit-transform:scale(0.5) rotate(45deg);}
25% {-webkit-transform:scale(0.5) rotate(45deg);}
25.01% {-webkit-transform:scale(0.5) rotate(90deg);}
37.5% {-webkit-transform:scale(0.5) rotate(90deg);}
37.51% {-webkit-transform:scale(0.5) rotate(135deg);}
50% {-webkit-transform:scale(0.5) rotate(135deg);}
50.01% {-webkit-transform:scale(0.5) rotate(180deg);}
62.5% {-webkit-transform:scale(0.5) rotate(180deg);}
62.51% {-webkit-transform:scale(0.5) rotate(225deg);}
75% {-webkit-transform:scale(0.5) rotate(225deg);}
75.01% {-webkit-transform:scale(0.5) rotate(270deg);}
87.5% {-webkit-transform:scale(0.5) rotate(270deg);}
87.51% {-webkit-transform:scale(0.5) rotate(315deg);}
100% {-webkit-transform:scale(0.5) rotate(315deg);}
}
Now that is cool! Too bad IE doesn’t support such effects, yet.
Don´t see in Opera 9.50
nice technique; i agree with others that performance issues might make this somewhat overkill, or inappropriate for widespread use now…BUT with the advent Chrome (and the chatter about IE9), JavaScript performance should be less and less of an issue (going forward).
Also, this is a great way to introduce folks to a lot of the new CSS3 properties; thanks for the write up!!
Paul: i got a that a little too; is that maybe because like Sam said, the function just keeps adding +45, ad infinitum… ?
Hey All, I made it reset at 360 degrees, does that work any better?
[...] CSS3 loading spinners without images • CSS & (X)HTML Simple CSS3 to make a spinning "loading" animation. (tags: animation css tutorial webdesign) [...]
[...] CSS3 loading spinners without images • CSS & (X)HTML • Kilian Valkhof [...]
Very interesting, im going to need this for a project coming up soon, although my rotating image will be far larger.
I poked around at your code, and it is possible to make the spinner look right with just CSS, albeit only in WebKit nightlies:
http://external.sidneysm.com/css_loading_spinner.html
The result in in older browsers ain’t that bad.
I am trying to figure out how to put this in an html page. There is not enough instruction here to duplicate one spinning thingy like you show. What goes where. I have tried to put it where it logically goes (I build alot of sites). Something is missing in the instruction here. Like is the bar a graphic or defined in css? I see no ref to a graphic and I put the code on the page and nothing happens. Anyone have a clean example that shows how its setup. Looks like what I’m looking for but cant get there from this instruction. Thanks
Is there a way to use this with a single image and have the code rotate one image? It seems that this is built to do something like this. A single image to replace the bar and do the rotate?
I’d really like to the the code for the 1st spinner under the Animation heading. It look like a single image rotated. But its increadibly difficult to tear the source code apart with so much going on around what I’m after. I did manange to tear apart the example page and just show the code for the first spinner under Bars. There is still some stuff on the page that I dont know if needs to be there. But found that the example is still using javascript. Thought it was a non javascript example. Semms that contradicory things are said on the top of the example page that make it confusing.
[...] CSS3 loading spinners without images [...]
Too slow… It jam the page… I still prefer a 5k .gif file
But nice technique anyway…
Agree with Louis, as a matter of fact was just going to write the same remark, I think one line of code and a small img is preferable.
But the thechnique is nice really and I am sure someone will think of some other use to deserve the effort.
[...] CSS3 loading spinners without images [...]
It is good… I like it..
Opera also does transitions since Presto 2.3, so you could also throw in some -o-transition’s in there :)
http://devfiles.myopera.com/articles/1041/image-gallery.html
[...] http://builder.japan.zdnet.com/sp/css-firefox-safari/story/0,3800083423,20406086,00.htm?ref=rss http://kilianvalkhof.com/2010/css-xhtml/css3-loading-spinners-without-images/ http://perishablepress.com/press/2010/01/11/css3-progressive-enhancement-smart-design/ [...]
good post my friend…
This post is good…
I used CSS3 animation for developing loading images which are looks looks like regular loading spinners.Please check them out here .. http://goo.gl/vtKe
[...] CSS3 loading spinners without imagesWhile playing around with css-transform to make various shapes, I saw a way to create animated image-less loading spinners such as used in a lot of web-apps and of course on the iPhone. [...]
[...] CSS3 loading spinners without images While playing around with css-transform to make various shapes, I saw a way to create animated image-less loading spinners such as used in a lot of web-apps and of course on the iPhone. [...]
Awesome solution for saving requests (JS, Images,…). Thx for sharing!!
[...] 40. CSS3 loading spinners without images [...]
[...] 40. CSS3 loading spinners without images [...]
[...] CSS3 Loading Spinners without Images [...]
[...] CSS3 Spinners Chargement sans images [...]
[...] CSS3 Loading Spinners without Images [...]
[...] në se si unë mund të bëjë atë pa e imazhit. Një kërkim të shpejtë çuar në një post nga Valkhof Kilian i cili kishte një ide e mirë për teknikë themelore. Hapi i parë është që të krijojë baret [...]
[...] CSS3 Loading Spinners without Images [...]
[...] I decided to look again into how I could do it without the image. A quick search led to a post by Kilian Valkhof who had a good idea for the basic technique. The first step is to create the bars of the animation [...]
Well, I have a use case! WebKit on Android <2.2 doesn't support animated gifs, so this looks like the best solution.
[...] CSS3 animation, but I’d rather keep it consistent between browsers. The technique comes from Kilian Valkhof with initial integration into VideoJS by Janez Troha [...]
Awesome. Worked perfectly for me! This will look great for the slow loading js stuff on some of my sites.
[...] CSS3 Loading Spinners without Images [...]
Very nice effect you did there, maybe in the future I will use this…
A nice and respectful suggestion: do not put the first letter of the comment so big or so down in comparison with the first line, it just doesn’t look good; maybe you can upload it a bit.
Anyway, thank you very much!
[...] http://kilianvalkhof.com/2010/css-xhtml/css3-loading-spinners-without-images/ Tags: animation, css, CSS3 Transitions, css3 webkit, webkit Category: Web Design » Comment → » Trackback [...]
[...] http://addyosmani.com/blog/how-to-create-impressive-animations-using-webkit-css-and-javascript/ http://kilianvalkhof.com/2010/css-xhtml/css3-loading-spinners-without-images/ [...]
nice. really liked the last one. i think you might also be interested in http://cssload.net – it’s a generator of these things
Yeah cool one. I prefer GIF and APNG though. CSS3 animations are not yet supported by all browsers.
[...] using pure CSS3 for mobile apps, there already were some nice CSS3 indicators over the web – CSS3 Loading Spinners Without Images by Kilian Valkhof and Loading spinner animation using CSS and WebKit by Jason Z.. But we wanted to make something of [...]
CSS3 is the future, I just wish it was the present. So many people are slow to embrace this amazing technology, I just wish I could speed up the clock somehow!
Unfortunately, CSS3 animations seem to be quite CPU hungry at the moment. A simple spinning image made Firefox go up to almost 50% CPU usage!
In Chrome, the animation on this page spikes around 30%!
Looks like this method needs a bit of optimizing before I would recommend it.
[...] 源码 + 演示 [...]
[...] I decided to look again into how I could do it without the image. A quick search led to a post by Kilian Valkhof who had a good idea for the basic technique. The first step is to create the bars of the animation [...]
[...] 源码 + 演示 [...]
Your response?
If you post code examples, make sure to escape your HTML.