CODEWITHSUNDEEP
javascriptcss
Settings Menu Hard to Find
Settings Menu Hard to Find

Reputation: 1141

CSS/JS: CPU lightweight loading spinner

I am designing a Node.js application to perform tasks that take a variable amount of time. While the application performs those tasks I want to display a loading spinner. However my loading spinner taxes the CPU much more than I expected. Viewing my CPU usage in Task Manager, at idle my program is ~1% but with a single loading spinner visible it rockets up to >36% (in electron, Task Manager shows about 12% CPU use in Chrome).

This is unacceptable because the spinner can be on screen for greater than ten minutes and my poor laptop starts to overheat. I have tried using .gif images and pure css solutions as an alternative to rotating svgs but both methods also use too much of the CPU.

Is there a lightweight solution (~3% CPU maximum) to create a spinner like the snippet shown below?

<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>

Upvotes: 2

Views: 1025

Answers (1)

Krunx
Krunx

Reputation: 256

If that spinner design is what you are looking for, I would suggest a pure CSS solution. Define an element that will have class spinner. Then your css might look something like this:

.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>

Upvotes: 2

Related Questions