Site Health: the ellipsis CSS keyframe animation doesn't work in all browsers

[afercia]

Splitting this out from https://core.trac.wordpress.org/ticket/46573#comment:59

The "ellipsis" CSS keyframe animation (used on the health score indicator while the score is being calculated) works only in webkit and Firefox: doesn't work in Edge and IE11.

Turns out content isn't one of the CSS ​animatable properties. The fact it works in webkit and Firefox is non-standard and not guaranteed to work in the future.

There are alternative CSS techniques ​(a few examples here), but they somehow rely on the font metrics and on animating the width of the "dots" container. I've tried one of them but WordPress uses system fonts so the rendering is different on different operating systems. The width varies and those techniques seem unreliable.

Though minor, I don't see a good reason why WordPress should release new code with features that don't work in all the officially supported browsers.

I'd suggest to use a different animation. It doesn't necessarily needs to display "dots".

[Clorith]

The dots here were added as an extra visual element, as the ring also "pulses" while it's loading, but I wanted to provide something more for those who may not pick up on colors as easily.

There's nothing wrong with providing a static "..%" sort of display while it's loading if there's problems with some of the animations.

[afercia]

It's a non-standard behavior. This animation could stop working at any time also in webkit and Firefox.

[Clorith]

Ahh, sorry I may have been a bit unclear.

Would using a fixed string of ..% while it's running be OK, no animations or anything just the text, and then replace it once tests are completed?

[Clorith]

46684.patch​ removes the animations on the loading ellipsis, and uses the middle dot character to indicate an unloaded state.

This leaves a centered (see #46781) indicator, with no animations, to at least make it clear there's something missing from that area at this time.

[pento]

In 45145:

Site Health: Remove animated ellipsis from the status loading indicator.

This animation wasn't particularly reliable across browsers.

Props Clorith, afercia.
Fixes #46684.