Third Example CSS3 Loading Animation Loop

HTML

In this latest example we find a simple loop that is animated thanks to the transform:scale property.
The markup is longer than its predecessors, but this can vary according to the blocks you want to insert.

Thanks for the nice animation loop ! Im not really good in css and have a little problem, maybe someone could give me a hint on how to solve this. I cant get the Positioning of the second Example to work. I want it as an Loading Animation for my Page 20% from the bottom. Everything i try out makes one circle disappear or the animation stops or .. i dont know, could someone give me a Hand please? :)

Hello Sarah, create a container and put it inside the loading animation.
I’ve tested and it works, you just to center the container!
.container {
position:fixed;
bottom:20%;
width:960px; /* Or your width */
}

Very very cool.
Personally, this whole animation stuff is a little too much for me, especially the code. I know they’re practical uses for it, but in this case, I’d probably open up Photoshop or Flash, make the animation that way and export it as an .gif file.

Thanks for the tutorial! This is awesome. I was actually working on using it for a personal project but ran into an issue. It was running great for a while, but then all of a sudden it started getting really slow and making the entire app run slow. I take out the spinning animation and everything runs smoothly again. Has anyone seen something like this where a spinner animation brings the page to a sluggish halt? I really like the spinner animation, but I can’t use it if it slows everything down.

Thank you for the tutorial. It helps a lot.
But unfortunately, the 2nd example is not working any more on the latest Google Chrome.
(The outskirt rotation is not working, but its rotating if you inspect the element. Maybe Chrome not supporting border rotation anymore?)
It still works in firefox though :D