How To Change Your Firefox Throbber

original

You know that cool little icon in the upper right-hand corner of your Firefox browser? That is your Firefox throbber - yeah, I don’t like the name either. However, its job is to let you know when there is still data being transferred from a site’s server by going through its animation cycle. In reality, the throbber is simply a combination of gif images. When no data is loading, and it is sitting still, you should see a still gif. However, when data is being loaded and the throbber is activated then the browser displays an animated gif. The process of making your own throbber is really simple, and it gives your browser a customized feel.

zerozero

The first thing you will need is an idea that will translate well to a tiny square no bigger than 50×50 pixels. For my throbber, I made an animated gif that fit the look of Zerosign.net. I made a simple design using MS Paint and drew out four different gifs that could be combined together to form an animated gif. I used a really simple gif animator program that I found online here. Once you’re happy with the animations, all that’s left is modifying some Firefox code.

Navigate to “C:/Documents and Settings/username/Application Data/Mozilla/Firefox/Profiles/xxxxxx.default/chrome”. In this directory, there should be a file called ‘userChrome-example.css’. Edit this file by adding the following lines of code to the top of the file and renaming it to ‘userChrome.css’.

toolbar #navigator-throbber { list-style-image: url(”newzero1.gif”) !important; }
toolbar #navigator-throbber[busy=”true”] { list-style-image: url(”newzeroani.gif”) !important; }

Of course, you would change the gif names to correspond to the names of your own image files. Then, after adding your gifs to this directory, restart Firefox. When your browser comes back, your new throbber will be there. For a slightly more detailed explanation of this process you can check out UrbanMainframe’s post about the topic.

final

If you would like to use my image files, you are welcome. They are really simple and if more than five minutes was spent on the process, I’m sure you could get some better effects. But if you so choose:

[newzero1.gif]
[newzeroani.gif]

37 Responses to “How To Change Your Firefox Throbber”

  1. Aaah nice!

  2. Wow, I am gonna have to try that right now. Cool little “mod” if you will.

  3. Sa-weet!

  4. Another throbber hack: Go to about:config and change the url in the key: “browser.throbber.url” to zerosign.net :)

  5. […] You know that cool little icon in the upper right-hand corner of your Firefox browser? That is your Firefox throbber – yeah, I don’t like the name either. However, its job is to let you know when there is still data being transferred from a site’s server and the process of making your own throbber is really simple. read more | digg story […]

  6. Doesn’t work in RC 1.5x
    :(

  7. […] For those of you who don’t know, the Firefox throbber is the little icon you see on the upper right hand corner of your Firefox window (under the Close button on Windows). Basically, it sits there while a page is loading to let you know that Firefox is actually doing something. Not very useful nowadays with high-speed broadband connections, but if you’re still on dialup or ISDN, I guess it could provide some form of hypnotic entertainment while you wait for a page to finish loading. Did you know it is possible to make your own throbber? You probably already install new themes on Firefox anyway, so why not go ahead and customize it further! The whole process is very simple and is detailed in a post over at Zerosign.net. All you need is a tool to create graphics (like GIMP or Photoshop…Paint would work just as well) and a text editor to modify one file in your profile directory. Have fun with it! Print Article You may also be interested in reading: […]

  8. Administrator on November 23rd, 2005 at

    haha, thanks ignatius. I’ll make sure to redirect all my throbber urls here :)

  9. I can’t seem to get this to work on Firefox 1.0.7…I have done all that is required, I made the animated gif, I captured the first frame of the gif and saved it, I changed the userChrome-example.css file and renamed it, but still no luck. My directory is C:\Documents and Settings\Cody\Application Data\Mozilla\Firefox\Profiles\[stuff that I don’t feel like typing].default\chrome. Any ideas?

  10. Administrator on November 23rd, 2005 at

    hmm… are your gifs located in the same file?

  11. I made a seperate folder called images and referred to the images as /images/img.gif and /images/anim.gif after it didn’t work when I just referred to them as the files by themselves.

  12. this rocks…

    I now have a spinning porche in the corner of my browser

    I AM a happy camper!

  13. forgot to mention that the gif can only be 40pixels tall,
    but it can be any width

  14. Cody, I experienced the same problem with 1.0.7 and it didn’t work even after creating the images folder and re-editing the css file. What now?

  15. I don’t know, I never quite got it to work. I’ll keep trying though, and I’ll let you know if I get it to work. My images are 24×25, so maybe I should get bigger ones…I don’t know. I’ll let you know if I make any breakthroughs though.

  16. Hey Cody, my images were 50×50, so I don’t think that’s the issue, but thanks for trying…don’t know what to think, 1.0.7 is the latest official release is it not? What version / platforms are these other people using I wonder? Thanks again.

  17. Maybe I’ll try it with the RC3 release…I’ll get back to you on that one.

  18. No such luck with the RC3 release either. I’m going to try and write an extension, which will let you locate and pick your GIFs for the throbber. Wish me luck. :P

  19. Administrator on November 24th, 2005 at

    I am using winXP with 1.0.7 version of FF and I have no problems. But Cody, if you write a successfull extension let us know - that would be awesome!

  20. Okay, I hit a little roadblock. I found out how to overlay a user-specified CSS file using an extension, but as of yet, it uses the chrome.manifest way, which is for FF 1.5 only. Plus, it won’t even install in FF 1.5. I’ll keep you all posted.

  21. […] How To Change Your Firefox Throbber … Throbber? Yes, this little icon thingie in the top right corner […]

  22. Could someone recommend a good PC freeware, or process, for making animated GIFs?

    Thanks.

  23. “Could someone recommend a good PC freeware, or process, for making animated GIFs?”

    Sure can! For my animated gif I used the MS Gif Animator which is easy, free, and can be found here:
    http://www.jhepple.com/gif_animator.htm

    enjoy!

  24. Thanks, leadingzero. I’ll try out that animation tool this evening.

  25. Okay, I’m almost there. I have the extension working, but it won’t overlay the new throbber, all it will do is put ‘FireThrobber’ in the status bar like I wanted it to…

  26. GIF’s are patented.

  27. […] zerosign.net » How To Change Your Firefox Throbber […]

  28. I was searching the web and found your entry. I really like your site and found it worth while reading through the posts. I am looking to publish a comprehensive site reviewing many different articles and blog. Please feel free to take a look at my blog at adobe photoshop manual and add anything your want.

  29. Santana Juelz What The Game’s Been Missing

    zerosign.net » H…

  30. […] Here’s an easy step-by-step guide how to change it in a few minutes: here. […]

  31. you don’t like the name throbber cause the real anme for that is “spinner”. This is because the original browser(s) had a spinning icon. Danm kids, it was only 12 years ago…

  32. […] You know that cool little icon in the upper right-hand corner of your Firefox browser? That is your Firefox throbber - yeah, I don â��t like the name either. However, its job is to let you know when there is still data being transferred from a siteâ��s server and the process of making your own throbber is really simple.read more | digg story […]

  33. The Complete Guide To technology

  34. Thanks for taking the time on writing an article about this information…excellent.

  35. did not work can u do one for windows vista?

  36. ignore top one but there are two examples which one do i use the top or bottom?

  37. ya, doesent work for vitsa :S

Leave a Reply