Animated GIF
PNG sprite sheet
Generate animation
Download GIF
Download PNG

Example javascript sprite sheet implementation:

#indicator{
    width: 100px; height: 100px;
    background-image: url('indicator.png');
    background-position: -100px 0;
}

<div id="indicator"></div>

var size = 100;
var num = 12;
var duration = 80;
var i = 0;
var ele = document.getElementById('indicator');

function animate() {
    i = (i+size)%(size*num);
    ele.style.backgroundPosition = -i+'px';
}

setInterval(animate,duration);

LOADERSUITE is an advanced online loading animation generator.



Animated GIFs do have transparency, but remember to set a background colour to match the background you intend to use the animation on.

If you need alpha transparency, use a PNG sprite sheet. PNG is slightly more difficult to implement, but has the advantage of an alpha channel.

Click here for an example sprite sheet animation script.