Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

Lolu chungechunge lwabekwa kunqolobane. Uyacelwa ubuze umbuzo omusha uma udinga usizo.

How do I suppress the sliding dots in the tab title during page loading?

  • 10 uphendule
  • 3 zinale nkinga
  • 150 views
  • Igcine ukuphendulwa ngu The Matrix

more options

How do I suppress the oscillating sliding dots, which appear on the left of the tab title to indicate that a page is loading?

I find such animations unhelpful and unattractive - and that they are now far too common.

My best solution so far is to systematically close my eyes for a few seconds after hitting the enter button, but it I would prefer not to have to do this every time I load a web page.

How do I suppress the oscillating sliding dots, which appear on the left of the tab title to indicate that a page is loading? I find such animations unhelpful and unattractive - and that they are now far too common. My best solution so far is to systematically close my eyes for a few seconds after hitting the enter button, but it I would prefer not to have to do this every time I load a web page.

Isisombululo esikhethiwe

You shouldn't place files in the storage area (storage - permanent), so remove the one(s) you added there.

Did you verify the the file name is actually userChrome.css and not userChrome.css.txt or userChrome.css.css?

Did you add the @namespace at the start of the file?

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* only needed once */
Funda le mpendulo ngokuhambisana nalesi sihloko 👍 1

All Replies (10)

more options

I can't remember the specific CSS to only hide that but you can switch toolkit.cosmeticAnimations.enabled to false in about:config.

more options

Thanks, Moses. I have set toolkit.cosmeticAnimations.enabled to false in about:config. Unfortunately, this doesn't suppress the sliding dot cosmetic animation.

more options

To turn off Firefox built-in animations:

Type about:config in the Firefox address bar and hit the Enter-key afterwards. Confirm that you will be careful if the warning intermediary page is displayed. Use the search to find toolkit.cosmeticAnimations.enabled. Double-click on the preference name to toggle its state.

Also set the rest of these to false in the same way:

browser.tabs.animate browser.fullscreen.animate browser.download.animateNotifications alerts.disableSlidingEffect

May have to restart Firefox for Changes.

Please let us know if this solved your issue or if need further assistance.

more options

Thanks, Pkshadow. I have set both toolkit.cosmeticAnimations.enabled and browser.download.animateNotifications to false in about:config.

Unfortunately, this doesn't suppress the sliding dot cosmetic animation.

I have searched and browsed in about:config, but could not find browser.tabs.animate, browser.fullscreen.animate or alerts.disableSlidingEffect. So I cannot (at present) change these. I am using Firefox Quantum 57.0.3 (64-bit).

more options

Hey ChrisHeryet, did some digging and I may have found a solution. You need to create a userChrome.css file if you do not have one already. https://www.userchrome.org/how-create-userchrome-css.html I checked to make sure the chrome URLs including the PNGs were still available as of 57 and they are. Just paste this code into userChrome and restart Firefox for the changes to take effect:

.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/loading@2x.png") !important;
  }
}

Okulungisiwe ngu Moses

more options

Thanks Moses, I've just created a userChrome.css file containing your script. I put this in a new chrome folder, which is a subfolder of the folder (x44o2lum.default) for the default user in the Firefox Profiles folder. Unfortunately, this had no apparent effect (even after restarting Firefox).

I also put a copy of the userChrome.css file in an existing chrome folder (x44o2lum.default - storage - permanent - chrome). This also had no apparent effect (even after restarting Firefox).

Chris

more options

Isisombululo Esikhethiwe

You shouldn't place files in the storage area (storage - permanent), so remove the one(s) you added there.

Did you verify the the file name is actually userChrome.css and not userChrome.css.txt or userChrome.css.css?

Did you add the @namespace at the start of the file?

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* only needed once */
more options

Hi Moses and cor-el

Problem solved! Many thanks!

I now have the old circling animation on the left of the tab title to indicate that a page is loading. This is more than sufficient as an indication of activity. I am very pleased to be free from the sliding animation. Sliding animations are of course effective as eye-catchers, but I find repeated use of such animations an annoying waste of time and energy.

The file name (userChrome.css) was correct. I have deleted the copy which I put in the storage area, so I have now added nothing to the storage area.

I did the following 4 things just before the problem was solved: 1. I added  !important to the css file in 3 locations. I don't know why, but my original copy and paste of the css file from Moses missed this. My apologies if I got something wrong here.

2. I added the line proposed by cor-el to the start of the css file.

3. I restarted Firefox a few times.

4. I installed the latest upgrade to my operating system (Windows 7).

I'm not sure how many of these were essential - probably the first 3.

I append and attach the successful css file with many thanks to both of you.

Best wishes Chris

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* only needed once */ .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/loading@2x.png") !important;
 }

}

more options

This is not working for me with FF 58.0.1. I cannot find a loading.png anywhere on this box. Where is it supposed to be and can someone send it to me please?

more options

Never mind I was being stupid again!