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.