Я создаю индикатор выполнения, и я работаю над случаем, когда он на самом деле не показывает прогресс, а просто вращается индикатор "что-то происходит" . Дизайн, который у меня есть для него, в основном состоит из чередующихся диагональных полос, по сути, как парикмахерская, вроде этого, но "крутится":
В надежде переложить как можно больше на механизм рендеринга, я хочу использовать переходы CSS для этот. Поддержка старых браузеров меня не беспокоит.
Итак, моя первая идея заключалась в том, чтобы в основном сделать это:
.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;
}
... а затем, когда он отобразится на экране, использовать Javascript, чтобы сделать это :
myBarberPole.style.backgroundPosition = '-1000000px 0';
Есть ли проблемы с производительностью:
background-position: -1000000px 0
? Как вариант, есть ли у вас лучшее решение?