CSS spinners & other spinners

... recommendations ...

Let them go!


Spinners only for emergency cases!

For spinners in general (CSS-rotating images, CSS-only spinners, animated gif's, etc.), I should advise: try to avoid them by speeding up the page.


Note: in the illustration on top of this page I embedded the spinners in a <div id="scaler">, with a combined animation of the transform: scale(..) and the positioning left: ..%; top: ..%;.
Firefox and even IE-11 support this without grumbling.
Blink (Chrome and Opera) apparently has a bug and can not handle this: result is a blurry spinner. The opacity variations don't have influence on it.
It looks like Blink is in a hurry and takes the first transform: scale(.1) of the spinner as base for enlarging later on, with a pixelated thing as outcome.
But without animation of the spinner Blink is performing as expected !

While I didn't want to explore another embedding div around, I didn't succeed in finding a proper CSS work-around for Chrome & Opera which was appreciated by the other browsers.
A CSS-delay for the animation of the spinners didn't help ! (nor alternative positioning with margins or translates).
- The only way seemed to be a "hard delay" with a javascript setTimeout for the start of the animations of the spinners (see source code of this page). To obfuscate the initial not spinning spinners, an ease-in style is provided. If the system is running in this way (second and further runs of the spinner moves), everything is fine and they are spinning already when appearing at the bottom.

What to do