Disclaimer: Accessing the information on this page means you agree to the Sites Terms of Service
Have you ever needed to pause the ajax loading throbber on your Drupal (or other) site for styling purposes?
If you're fairly new to using a browsers inspector, it can be a little intimidating to figure out how to first pause it when it kicks off and second, style it once you get it paused. It's actually quite easy though and I'll show you how! This is done in Google Chrome, but other browsers like Firefox should probably be fairly similar.
Step 1 is to inspect the element where the throbber resides. Right click and select "Inspect Element". If you didn't get the exact element you're looking for, dig a little deeper until you get there. Keep in mind, the actual throbber element is hidden because we haven't kicked it off yet.
The next step, is to go to the Sources tab and on the right hand side, look for Event Listener Breakpoints. (Click the expand arrow if it isn't already expanded).
Inside the Event Listener Breakpoints, we want to add a check next to: XHR
The third step is to kick off the throbber. If the throbber loads on a page load, refresh the page. If it's dynamic to a specific element like clicking a checkbox or clicking a button, do that.
Note: If you have to refresh the page, you will have to find that element again by hand, stepping through each and every element until you get there. There is no way to prime the element for later as outlined below.
You'll see the main screen gray out and a Paused in Debugger message show up at the top. If you don't see your throbber yet, click on the Play button to the right of that debugger message. This will step through each function until you get to the one that shows the throbber.
When you finally get to the loading throbber and it's permanently visible, click back over to the Elements tab which will have your parent throbber element ready to go (unless you had to refresh the page...).
You should now be able to see the div that contains <div class="ajax-progress ajax-progress-throbber"> which is where you can adjust your styling.
The final step is to add the selectors over in the styling selector pane by clicking on the + and adding in the classes or ID's you're trying to style.
Once you have what you want, be sure to copy the new css style and add it to your stylesheet.
I've had to do this on a handful of ocassions and every time I have to mess with it, I completely forget "how to do it". I decided it was time to write up some notes so I don't have to spend 20 minutes trying to figure it out the next time I have to style my throbbers. If you were struggling to style your throbbers, Hopefully this gets you going on your project as well!
Post Comment