A Simple Loading Icon
Pure CSS3 loader created using animation
and keyframes
. Here, 12 bars are used to create the loader which are positioned and rotated accordingly using the transforms. Then these are animated with each of them having a different animation-delay
so that they animate at different timings to render the loading animation.
It's a pretty cool technique but obviously this is not practical. It cannot be used in real world appplications. This demonstration will only work in Webkit browsers and Firefox as Opera and Internet Explorer doesn't support the animation
and keyframes
properties yet.