Programmers Stack Exchange is a question and answer site for professional programmers interested in conceptual questions about software development. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

I have seen this article: CSS3 Loading elements at HTML5 and CSS3 Tutorials pages.

How did someone made this calculations? what angle, how much space, how much rotation to give?

If I do it with hand, starting number one, I fear it takes too long as a process to complete. Is there some tool, or some trick that do this or is it based on some technique that I am unaware somehow?

[EDIT] I am trying to tweak the width and height of this CSS, in order to make it smaller, and is broken. It seems to be calculated as is and you can't touch it.

share|improve this question
It may help to leave a comment for the author at the bottom of the page. – NoChance Jul 19 '12 at 13:03
Indeed goog idea, and I really did – hephestos Jul 19 '12 at 13:04
Thanks for your response. Also, the sister site: may be a better place to move the question to. – NoChance Jul 19 '12 at 13:13
Emmad, thank you too, is there abutton to move it, or delete and repost ? – hephestos Jul 19 '12 at 13:28
@Emmad: This isn't really a ux question, it's a programming question or a math question. The UX decisions are already made. – Brian Jul 19 '12 at 13:49
up vote 1 down vote accepted

Angle / rotation: 360 / # of elements = angle.

So, if you want an 8-sided (as is used by CSS code), use 45 degree angle increments.

The time calculations are just (element number) * delay, with delay being 0.13.

Hence, the animation duration is 1.04 (0.13 * 8) and each element's delay is 0.13 higher than the previous one.

share|improve this answer
@gnat, thanks! that gives transparency to the problem. But then changing the width or the height, outputs trash. Is there a division again between the width of the surface and the elements perhaps? What book should I look for to dig into these effects? For example from this snippet of code, the third element, is more advanced technique I think, somehow...I am totally newbie into css3 and html5 you see.. – hephestos Jul 19 '12 at 14:19
If you are going to change width and height of the elements, you should make the changes proportionally. That is, multiply all the width, height, left, top, and transform:scale properties by the same factor. Actually, you probably would only need to modify top, left, and transform:scale. As for the top and left positions, I'm not completely sure how they are calculated. I would have expected them to be calculated via trigonometry (sine and cosine), but the numbers don't match my expectations, so I'm missing a step. As an aside, that CSS won't work in IE9. – Brian Jul 19 '12 at 14:48
As an aside, I recommend using a tool like Opera DragonFly or Firefox Firebug to make live-edits to your css. It's significantly easier to get a feel for what your css is doing that way. – Brian Jul 19 '12 at 15:08
Indeed, I use firebug, all the time. You mention that in IE9, it won't work. How's that? why ? And if I am not that opressing guy, I need this thing to work for ie above 6 perhaps...[yes I know it's html5, so I just wanted to play with it] , could you suggest some alternative to look for ? – hephestos Jul 19 '12 at 16:06
I opened it in IE9 and it failed. When can I use... says not to expect CSS3 animation in IE9. IE8 doesn't even have rotate (you can fake it with Matrix filters, but in my experience the results tend to look a little bit off). For production use, I recommend just using an animated gif. – Brian Jul 19 '12 at 16:52

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.