Question

我正在设计一个Node.js应用程序来执行耗时的任务。当应用程序执行这些任务时，我想显示一个加载微调器。但是，我的加载微调器比CPU负担的多得多。在任务管理器中查看我的CPU使用率，闲置时我的程序约为1％，但是可见一个加载微调器，它的运行速度猛增到> 36％（以电子方式显示，任务管理器显示CPU的使用率约为12％ Chrome）。

这是不可接受的，因为微调器可能会在屏幕上显示超过十分钟，并且我的可怜笔记本电脑开始过热。我曾尝试使用.gif图片和纯CSS解决方案来替代旋转SVG，但两种方法都占用了过多的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>

CSS / JS：CPU轻量级加载微调器

1 个答案: