Is there a performance issue with using very large background-position offsets?

Question

I'm building a progress bar control, and I'm working on the case where it doesn't actually show progress, but just spinning indicator of "something is happening". The design I have for it is basically alternating diagonal stripes, essentially a barber pole kinda like this, but "spinning":

With the hopes of offloading as much as I can to the rendering engine, I want to use CSS transitions for this. Supporting old browsers is not a concern for me.

So, my first idea was to basically do this:

.barber-pole {
    background-image: url(repeating-slice.png);

    /* set a very long (one hour!) transition on the background-position */
    transition: background-position 3600s linear 0s;
}

... and then, when it gets rendered to the screen, use Javascript to essentially do this:

myBarberPole.style.backgroundPosition = '-1000000px 0';

Are there any performance issues about:

1. Transitioning for that long
2. Having background-position: -1000000px 0 ?

Alternatively, do you have a better solution?

Answer 1

I don't think there could be any performance issues. It's not because you use big numbers that they use more CPU or memory.

Answer 2

In the absence of 'chaining' transitions to themselves (as far as I know there is no pure-CSS way of telling when the transition has finished) this could be a good solution, but as Justin says it requires a massive image! Is there any problem with using a good old-fashioned animated GIF?