‘Throbber’ in Drupal is the animated loader ( found at /misc/throbber.gif ), used to indicate Ajax progress.
If you want to change it evenly across your theme, don’t even think to just replace the ‘/misc/throbber.gif’, instead save your .gif file in your drupal theme, and in your theme’s .css file override drupal’s default CSS rules which style the ‘throbber’. This default CSS can be found ( but not edited ) at ‘/modules/system/system.base.css’, and you just have to copy them to your css file, as shown below.
Keep in mind that ‘throbber.gif’ is in fact a sprite image, which contains two states ( one static, used for idle state, and one animated used for progress ).
Add these in your theme’s .css, and tweak them accordingly to your animated loader :
/* these apply to auto-completing form fields */ html.js input.form-autocomplete { background-image: url(path-to-your/loader.gif); /* tweak this according to your gif */ background-position: 100% 0px; /* tweak this according to your gif */ background-repeat: no-repeat; } html.js input.throbbing { background-position: 100% -20px; /* tweak this according to your gif */ } /* these apply to all ajax progresses */ .ajax-progress { display: inline-block; *display: inline; *zoom: 1; } .ajax-progress .throbber { background: transparent url(path-to-your/loader.gif) no-repeat 0px 0px; /* tweak this according to your gif */ float: left; height: 20px; /* tweak this according to your gif */ width: 20px; /* tweak this according to your gif */ margin: 2px; }
You can also add this
.checkout-processing { /* this is for the commerce checkout */
background-image: url(“../images/throbber.gif”);
padding-right: 16px !important;
}
Thanks for this,
I knew I forgot something.
i will try too to my website thanks