Animated CSS3 Download Icon

The idea is taken from Dan Eden ( demo ), I have just slightly modified the way.

The essence

As a circle, use the usual block with a frame. The frame can be of any color and width (this is also the uniqueness of the way that the block is absolutely independent of the background and other things). We round the frame by 100% and make its upper part transparent. We insert a triangle (a hack with a zero block size and a border) using our favorite pseudo-elements into this space. Well, in the end we animate the block to simulate the effect of loading.
')
Markup:

<span class="spinner"></span>​ 

CSS:

 .spinner { display: block; width: 35px; height: 35px; margin: 80px 150px; position: relative; border: 2px solid rgba(0,0,0,0.5); border-top-color: transparent; border-radius: 100%; animation: spin 1s infinite linear; } .spinner:after { content: ''; display: block; width: 0; height: 0; position: absolute; top: -6px; left: 3px; border: 6px solid transparent; border-bottom-color: rgba(0,0,0,0.5); transform: rotate(45deg); } @keyframes spin { to { transform: rotate(360deg); } }​ 

Do not forget to specify browser prefixes!

The method works in all modern browsers (IE <= 9, let's goodbye!)

Jsfiddle demo