How to create a loading image sprite using background position

Question

I am looking to create a loading sprite which will work across all browsers as currently IE will stop animation in .gif files when a new page is called.

so far I have this function:

counter = 1;              //how many slides have we seen

function loadingWheel(loc) {
    var img = $('.img_working'),  //this is the div with the sprite
        slideCount = 76,          //this is so that we know when to stop
        slideH = 32,              //this is the height of each frame in the sprite
        pos = loc,                //this is the current y position
        newPos = pos + slideH;    //now we increase the position to set the css


    //set the new css position
    img.css({ 'background-position': 'center -' + newPos + 'px' });

    //Add to the count
    counter++; 

    //if we are the the last slide, we are going to reset the counter
    if (counter == slideCount) {

        //reset the position, wait for 700 ms then go again
        setTimeout(loadingWheel(0), 700);
    }
    else {
        //wait for 700 ms then go again
        setTimeout(loadingWheel(newPos), 700);     
    }  
};

loadingWheel(0);

The idea is to use setTimeout to create a loop which will pass in the current position then increase it, then call again.

The HTML and CSS so far is simple:

<div id="workingMessage">
    <div class="img_working"></div>
</div>

.img_working {
    width:32px;
    height:32px;
    margin:0 auto 20px;
    background: url(http://i.imgur.com/Hwgkxhy.png) top center no-repeat;
}

and here is a fiddle to show what I have got so far:

http://jsfiddle.net/uLycs/3/

I have a feeling that the animation is not working because of a problem with the way that I am setting the background position - Has anyone else done anything else like this before? I have looked at other plugins before but I am hoping that what I have so far should pretty much be all that I need and therefore I would not really want to have to include a 3rd party plugin.

Answer 1

Just for fun, I decided to make a pure css implementation of this.

html:

<div class="img_working"></div>

css:

@keyframes scroll-background {
    from {
        background-position: 0% 0%;
    }
    to {
        background-position: 0% 100%;
    }
}

.img_working {
    width:32px;
    height:32px;
    background-image: url(http://i.imgur.com/Hwgkxhy.png);

    animation: scroll-background steps(75, end) infinite 2.4s;
}

http://jsfiddle.net/82h2hbaa/

Be sure to insert your favorite browser prefix before keyframes and animation.

Answer 2

The issue comes from how you're calling setTimeout. The syntax for setTimeout is:

var timeoutID = window.setTimeout(func, delay, [param1, param2, ...]);

In the current version of the code, loadingWheel is evaluated before the timeout is set, which results in infinite recursion. In order to have loadingWheel evaluate after the specified amount of time, call it this way:

setTimeout(loadingWheel, 700, newPos);