javascript - CSS/JS : CPU lightweight loading spinner

Question

我正在设计一个 Node.js 应用程序来执行需要不同时间的任务。当应用程序执行这些任务时，我想显示一个加载微调器。然而，我的加载旋转器对 CPU 的负担比我预期的要大得多。在任务管理器中查看我的 CPU 使用率，在空闲时，我的程序约为 1%，但通过可见的单个加载旋转器，它会飙升至 >36% (在电子中，任务管理器显示大约 12% CPU 使用率) Chrome )。

这是 Not Acceptable ，因为旋转器可能在屏幕上显示超过十分钟，而我可怜的笔记本电脑开始过热。我尝试过使用 .gif 图像和纯 css 解决方案作为旋转 svgs 的替代方案，但这两种方法也使用过多的 CPU。

是否有一个轻量级解决方案(最多 3% CPU)来创建像下面所示的代码片段那样的微调器？

<svg width="64px" height="64px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" class="lds-rolling" style="shape-rendering: auto; animation-play-state: running; animation-delay: 0s; background: red;"><circle cx="50" cy="50" fill="none" ng-attr-stroke="{{config.color}}" ng-attr-stroke-width="{{config.width}}" ng-attr-r="{{config.radius}}" ng-attr-stroke-dasharray="{{config.dasharray}}" stroke="#ffffff" stroke-width="10" r="35" stroke-dasharray="164.93361431346415 56.97787143782138" style="animation-play-state: running; animation-delay: 0s;" transform="rotate(179.618 50 50)"><animateTransform attributeName="transform" type="rotate" calcMode="linear" values="0 50 50;360 50 50" keyTimes="0;1" dur="1s" begin="0s" repeatCount="indefinite" style="animation-play-state: running; animation-delay: 0s;"></animateTransform></circle></svg>

Answer 1

如果您正在寻找那种旋转器设计，我会建议使用纯 CSS 解决方案。定义一个具有 spinner 类的元素。那么你的 css 可能看起来像这样:

.spinner {
  background: red;
  height: 64px;
  width: 64px;
  border: 5px solid white;
  border-radius: 50%;
  border-top: 5px solid transparent;
  animation: rotate 0.6s linear infinite;
}

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

<div class="spinner"></div>