CSS3不确定进度条不冻结

Question

我想要实现的是一个不确定的进度条，在执行后台任务时不会冻结。

我已经尝试了以下方法，所有这些方法都会导致进度条在我执行另一项繁重任务时停止动画：

• .gif注意
• .SVG
• 原生的AngularJs材料不确定进度条（它继续移动，但有时向后移动，有时向前移动而没有任何意义）
• http://dev.gojko.net/web/2015/09/19/material-design-progress-pure-css.html
• How to write CSS keyframes to indeterminate material design progress bar
• 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

由于