X
Tap here to go to the mobile version of the site.

Support Forum

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

Posted

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.

Chosen solution

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 */
Read this answer in context 1
Quote

Additional System Details

Installed Plug-ins

Adblock Plus Privacy Badger Reader Browsing Protection by F-Secure

Application

  • User Agent: Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:57.0) Gecko/20100101 Firefox/57.0

More Information

Moses
  • Moderator
457 solutions 3598 answers

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

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

Question owner

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

Thanks, Moses. I have set toolkit.cosmeticAnimations.enabled to false in about:config. Unfortunately, this doesn't suppress the sliding dot cosmetic animation.
Was this helpful to you?
Quote
Pkshadow
  • Top 10 Contributor
689 solutions 8205 answers

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.

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.
Was this helpful to you?
Quote

Question owner

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).

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).
Was this helpful to you? 0
Quote
Moses
  • Moderator
457 solutions 3598 answers

Helpful Reply

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;
  }
}

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: <pre> .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; } } </pre>

Modified by Moses

Was this helpful to you? 1
Quote

Question owner

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

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
Was this helpful to you?
Quote
cor-el
  • Top 10 Contributor
  • Moderator
16163 solutions 145864 answers

Chosen Solution

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 */
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? <pre><nowiki>@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* only needed once */ </nowiki></pre>
Was this helpful to you? 1
Quote

Question owner

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;
 }

}

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; } }
Was this helpful to you?
Quote
The Matrix 4 solutions 113 answers

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?

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?
Was this helpful to you?
Quote
The Matrix 4 solutions 113 answers

Never mind I was being stupid again!

Never mind I was being stupid again!
Was this helpful to you?
Quote
Ask a question

You must log in to your account to reply to posts. Please start a new question, if you do not have an account yet.