By highvoltage on

So I've discovered that replacing the throbber.gif(the ajax loading indicator), isn't as easy as just replacing it with another gif file. So, I'm wondering how I'm supposed to go about this. Any suggestions?

Thanks for reading.

⋅ Categories: Drupal 6.x

Comments

dnewkerk’s picture

dnewkerk commented

I haven't tested this but it should work. Open system.css from modules/system (you will "not" be editing this file, just looking up info from it). Inside search for "throbber" and locate every CSS class or ID where the throbber is used. Copy these classes to your own style.css file. Change the background to point at your own image, and set the correct size dimensions. Refresh any caching on your site (go to Site configuration > Performance for the option), and that should do the trick.

-- David
davidnewkerk.com | absolutecross.com
View my Drupal lessons & guides

mbulungulu’s picture

mbulungulu commented

Any other suggestions? Totally bizarre.

cach’s picture

cach commented

It's a quick fix, but it works.
\sites\all\modules\views\images\status-active.gif

jenniferannwalsh’s picture

jenniferannwalsh commented

The following override worked for me. 

html.js a.views-throbbing,
html.js span.views-throbbing {
  background:url(../images/status-active.gif) no-repeat right center;
  padding-right:18px;
}

Change the image path to your new .gif and put in local styles css document. Then your mod won't get wiped out next time you update Views.

. . . . . . .
jen

Crom’s picture

Crom commented

I'm a bit late to the party on this one but the information here is great - thanks.

I want to go a little further though and position the throbber in a fixed position on the page each time it fires. I've found all the CSS I need and I can move it around within the confines of whatever div it's inside but I can't work out how to make it remain visible beyond the div's boundaries.

Can I do this with CSS alone or is there another hook that I'm unaware of?

Cheers,
Crom

TelFiRE’s picture

TelFiRE commented

Commerce seems to use its own set of classes.

I hope this functionality is made a lot more consistent, better yet make it part of core to just change the throbber.

Update: ok I found it, unfortunately it's done poorly. There is only one element, it's span.checkout-processing -- there is no inner .throbber element. So you can either have a loader or a background, not both. -_-

jmomandown’s picture

jmomandown commented

For anyone who stumbles on this thread. This is actually not true. You can set both a background and an image as follows:

span.checkout-processing {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 500;
  vertical-align: middle;
  text-align: center;
}
.checkout-processing {
  padding-right: 13px !important; /* LTR */
  margin-right: 6px; /* LTR */
  background: url("throbber.gif") no-repeat center center;
}