Efficient way to display 40+ animated spinning wheels

Question

The user can upload 40 files via drag and drop. The designer wants a spinning wheel for each item. I'm using css animation, but I wonder if there is a more efficient way to reduce rendering work for the browser.

CSS

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

What is telling you that it is not efficient enough? Modern browsers should be pretty good at such simple things. — Balázs, Nov 14 '17 at 08:05
Ok, but I noticed that an ipad is running hot while doing so many animations — vuvu, Nov 14 '17 at 08:11
Personal opinion, but I guess that has more to do with the device itself and/or the actual upload process that is going on in the background while the animation is being played. If 40 simple icons are too much to handle for a device in 2017 that's by itself problematic... — Balázs, Nov 14 '17 at 08:22

score 2 · Accepted Answer · answered Nov 14 '17 at 08:30

As @Balázs said, transform properties are efficient and there is not that much you can do to smoothen things.

Here is a summary coming from others Stackoverflow posts (links at bottom, of course):

Use the will-change property (MDN reference)
Use Chrome DevTools frame mode to see what is happening on your page and what you could get rid of

You may want to take a look at these references :

Efficient way to display 40+ animated spinning wheels

1 Answers1