CSS animated loading indicators

Are you telling me that CSS can now make nice animated wobbling circles but <i>still</i> can&#x27;t center in a sane way?<p>(Nice work, btw, like the animations =)

Here&#x27;s the browser compatibility info: <a href="http://caniuse.com/css-animation" rel="nofollow">http:&#x2F;&#x2F;caniuse.com&#x2F;css-animation</a>

Nice job. Is it a problem with the state of webdev that the thing I was most impressed by was that your website didn&#x27;t break my back button? Seriously, good work.

These are really very nice, but they don&#x27;t really convey any more information than a static picture of a puzzled kitten. Like &quot;security theater,&quot; this is &quot;progress theater&quot; and I would prefer to give my users a more useful indication of progress. I do appreciate the work that went into these, and admire the skill.

I&#x27;ve also created one<p>Windows 8 Loading with pure CSS3<p><a href="http://codepen.io/surjithctly/details/Kfqak" rel="nofollow">http:&#x2F;&#x2F;codepen.io&#x2F;surjithctly&#x2F;details&#x2F;Kfqak</a>

Here is a little editing on one of the ones I like this better then the three in a row. .spinner { margin: 100px auto 0; width: 70px; text-align: center; }<p>.spinner &gt; div { width: 22px; height: 18px; background-color: #333;<p><pre><code> border-radius: 100%; display: inline-block; -webkit-animation: bouncedelay 1.4s infinite ease-in-out; animation: bouncedelay 1.4s infinite ease-in-out;</code></pre> }<p>.spinner .bounce1 { -webkit-animation-delay: -0.32s; animation-delay: -0.32s; }<p>.spinner .bounce2 { -webkit-animation-delay: -0.16s; animation-delay: -0.16s; }<p>@-webkit-keyframes bouncedelay { 0%, 80%, 100% { -webkit-transform: scale(0.0) } 40% { -webkit-transform: scale(1.0) } }<p>@keyframes bouncedelay { 0%, 80%, 100% { transform: scale(0.0) } 40% { transform: scale(1.0) } }

Unfortunately very CPU intense, compared to SVG-based indicators

Nice work, especially &quot;Wave&quot; and &quot;Circle&quot; because they&#x27;re more likely to be recognised as such. (Similar animations are already seen in the wild.)

Now we have brand new CSS and we do a subset of the cool things, we could do in SVG since ten years. I&#x27;m a bit confused.<p>Oh and it doesn&#x27;t work in Opera 12 .

Feels a bit too flashy for me. That&#x27;s just personal opinion though, it&#x27;s still great work. Now work on cross browser support.

Very nice! Although I hope this won&#x27;t be mainstream too soon as this uses 10% of my CPU (Firefox on Linux).

I believe all of them actually use more bandwidth then a gif, so why use this exactly?

And this is main in favicon:<p><a href="https://github.com/dawjan/Open_Me/tree/master/JQ%20busy%20indicator" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;dawjan&#x2F;Open_Me&#x2F;tree&#x2F;master&#x2F;JQ%20busy%20in...</a><p>Sorry no preview

This is pretty neat, also I was incredibly surprised when going through the code to see in how little number of lines he achieved that!

It&#x27;s nice and well done, but now who would use this novelty idea in a real work? There are animated GIF or fonts SVG for that.

Does anyone have a tutorial that shows how to implement a loading screen?

The animation tears, and it needs antialiasing.

They don&#x27;t seem to animate in Chrome 31.