Firefox 57 still includes the blue "circling clockwise" icon (loading.png), so you can use a custom style rule to substitute that for the ping-ponging dots image/animation. I don't know whether that icon will continue to exist in the actual release, but it may be used elsewhere in the UI and need to be around for a while.

Firefox 57 does not have the gray counter-clockwise circling image that is used in Firefox 55 for the "connecting" state, but you can apply a filter to the blue image to gray it while it is "connecting" and restore full color once the page is "loading."

Are you familiar with the userChrome.css file? That's an optional file you can create to apply custom style rules to Firefox's user interface. Here is a set of rules you could save in the file to effect the change I'm describing:

/* For Nightly 57 as of 9/20/2017 */
.tab-throbber[busy]::before {
  background-image: url("chrome://global/skin/icons/loading.png") !important;
  animation: unset !important;
}
.tab-throbber[busy]:not([progress])::before {
  /* Grays the blue during "Connecting" state */
  filter: grayscale(100%);
}
@media (min-resolution: 2dppx) {
  .tab-throbber[busy]::before {
    background-image: url("chrome://global/skin/icons/[email protected]") !important;
  }
}

If you have never created a userChrome.css file, you probably do not have one. Please see this thread for an example of how to set one up:

https://support.mozilla.org/questions/1170342

There's also a tutorial over here: https://www.reddit.com/r/FirefoxCSS/comments/6xto4p/creating_and_editing_userchromecss/

Sorry, but that does not seem to work.

I created a "chrome" folder in the profile (mine is C:\Users\Warren\AppData\Roaming\Mozilla\Firefox\Profiles\sufpj8bb.dev-edition-default). then I saved your CSS in a file named "userChrome.css" in the chrome folder. Then I restarted FireFox and I still have the same ping-pong action for page load status.

Am I missing something. Your directions seemed clear enough. I even browsed to the "chrome://global/skin/icons/loading.png" and sure enough it is there.

is there a way to tell if the css is actually being used and does not have errors, etc. using firebug, etc.

Warren

Update:

Actually, I discovered an error in the CSS (mine of course). Somehow when I copied the text of your css it did not copy the !important attribute for the loading.png.

I have corrected that. Now when the page is loading, I don't have the ping-pong effect, but the little circling dots flicker on and off - mostly off.

as the attached jpg shows see 2nd tab from right in the jpg), the page load status area of the tab is blank while the page is loading. actually it is flickering, put the screen capture captured it when the circling dots were blanked.

Thanks for the support.

Warren

final update:

It is fixed and working now. I had to add the !important attribute to the animation:unset statement.

Sorry for all the confusion.

Thanks for the insight... ' Warren

Thank you for figuring that out. I type !important reflexively to override built-in style rules, and probably wouldn't have realized the consequences of leaving it off.

How about an option in settings to change ping pong dots back to a spinning dot wheel? Perhaps an add on? Thanks

Hi arejfour, such a change might come some day, but if you don't want to wait, you have the style recipe earlier in this thread.

Since then, I posted a site with more resources for creating your userChrome.css file: https://www.userchrome.org/

Note that it is usually best to open the chrome link with the throbber image in a tab and save the image to the chrome folder where userChrome.css is located.

• chrome://global/skin/icons/loading.png

That way you will always have the image available in case a future release omits it.

You can then only leave the image name and leave out the rest of the chrome URI.

.tab-throbber[busy]::before {
  background-image: url("loading.png") !important;
  animation: unset !important;
}