Second Example CSS3 Loading Animation

HTML

In this second example, we will see how to create a loading bar that fits any resolution. Just create a container that has a width of 100% and put inside a class via the animation will run the entire width of the screen.

<div id="content">
<span class="expand"></span>
</div>

CSS

It looks like the style, much simpler than the previous, this is the basic setting, you can modify at your convenience.

Very cool, but have to agree with Jitendra, seems less than semantic, a lot of cruft. It’s also entirely pixel based, although that could probably be changed. As a purely decorative feature, how is this better than delivering the same type of user-feedback with unobtrustive Javascript? At least then it would be possible to use less elements, and the markup could be loaded only if the user agent supports it.

In fact, the next tutorial will use jQuery to be displayed on supported browsers, and if that javascript is disabled the content will still be visible, finally i insert the markup for animation directly in jQuery.

I also use animation-delay, but my animation requires that I set two delays for each ring, which is problem. First delay is the initial delay, set for each ring in 2sec intervals (0, 2, 4, 6,..) and then 14sec delay, which is time needed for whole animation to finish and reiterate.
Talking about it, I’ve just figured out a solution, maybe. And that should mean less javascript controlling. I only need to modify each ring’s initial delay and set it to 14 sec, after it’s first cycle. — If I only could use animationend or animationiteration events :/

Anyway, in my opinion jquery.animate would be good solution only if I replaced whole css animation with it as I don’t think jquery and css animation would work together.

Still, this whole thing eats a lot of CPU and is laggy, so I don’t think there is any use in it (sadly). At least before they optimize animation processing…