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