CSS implementation loading loading animations

Excellent front-end engineers always prioritize using CSS instead of images:

Above This animation is not a GIF, but rather a pure CSS drawing that updates the animation through a JavaScript timer.

The basic idea is to create 8 circular Div, absolutely positioned into a circle, and then, in turn, update the transparency through the opacity property to get a loading.

Compared with GIF, the main benefit of CSS is that for different background colors, the animation is perfect, but also can be used to easily use CSS shading, lighting and other effects, while GIF support transparent color, but the background color selected when creating and the actual background color inconsistent will cause significant raw edges, and GIF is not easy to dynamically update , you need to regenerate the picture.

CSS can be wrapped into a jquery plug-in to achieve a very simple but very powerful loading animation, the disadvantage is that IE does not support Border-radius, so IE see the block.

If you don't want to write your own code, here's a visual online build CSS3 loading animated website, quite powerful:

http://fgnass.github.io/spin.js/

In addition to working properly in modern browsers, the generated code can also use VML to be compatible with outdated IE browsers, with minimum compatibility to ie6!

CSS implementation loading loading animations