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:
background-position: -1000000px 0
?Alternatively, do you have a better solution?
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With