All of these loading icons* are created with one single element, and some† CSS. Not. One. Single. Image.

Isn't that amazing?

The bulk of them are made possible by stacking multiple gradient backgrounds. Then with the help of some carefully selected keyframe animations we can get some infinite looping loading icons.

There's a few icons that make use of graphic fonts. Combine those with gradients and you can go crazy with what's possible.

*3-D icons are made up of many elements since with a single one, we only have 3 elements to create

†some CSS is subjective

And yes, all of thses icons are transparent, just try changing the background colors/pattern:

• .