CSS3 неопределенный индикатор выполнения, который не зависает

Question

Я пытаюсь достичь неопределенного индикатора выполнения, который не зависает при выполнении фоновых задач.

Я уже пробовал следующие способы, и все они заставляют индикатор выполнения останавливать анимацию всякий раз, когда явыполнить еще одно тяжелое задание:

• .gif
• .svg
• неопределенный индикатор прогресса исходного материала AngularJs (он продолжает двигаться, но иногда идет назад, а иногда вперед безв любом смысле)
• http://dev.gojko.net/web/2015/09/19/material-design-progress-pure-css.html
• Как написать ключевые кадры CSS для неопределенного индикатора выполнения проекта материала
• https://codepen.io/jsalazart/pen/aJdmvw
• https://codepen.io/holdencreative/pen/vEVbwv

Интересно то, что мне удалось получить спиннер, который состоит из одного значка обновления со следующей анимацией, и он никогда не зависает при выполнении тяжелых задач:

// Обновить анимацию, которая никогда не останавливается.

.spin {
  animation : spin 2s linear infinite;
}

@keyframes spin {
  0% {
    transform : rotate(0deg);
  }

  100% {
    transform : rotate(360deg);
  }
}

Из того, что я читал, кажется, что некоторые CSS3-анимации работают в отдельном потоке браузера, а также чтонекоторые другие анимации в том же потоке могут продолжать работать, если они не нуждаются в обновлении, например: простые изображения, анимируемые, как вращающаяся иконка обновления, но я не смог добиться того же эффекта для MDнеопределенный индикатор выполнения.

Есть идеи о том, как добиться неудержимого индикатора выполнения?: D

Спасибо