Skip to:

Feature Request: Ajax loading spinner

  • godavid33


    There are a good handful of functions that would be a lot better w/ principles of responsive design either hard-coded in or as a configuration option. For example, clicking the post button, deleting messages, and sending a message reply all rely on AJAX but to the average user (i.e. unpatient non-developers) the site may seem slow, sticky, or broken if they click and button and nothing happens for a good bit of time, depending on how fast your server can serve up admin-ajax.php. Thusly, I propose adding a default spinner that replaces any button that uses AJAX and makes the submit button disabled until a response is receive. I custom coded this for the reply to message button, and would be more than willing to share my code, though I fully believe in the BP developers ability to do it themselves 😉 I love BP and hope to see it take over the world one day.

Viewing 7 replies - 1 through 7 (of 7 total)

  • r-a-y


    We used to use an AJAX spinning GIF, but removed it due to various theme issues:

    I’ve added a patch for an alternative to the throbbler in 4951:

    It uses a progress bar animation for the background of the button.

    Henry Wright


    Hi @godavid33 I think users will always appreciate some sign of ‘we are working behind the scenes whilst you’re waiting’ especially when the wait happens to be for a few seconds. Perhaps you could share your code in a jsfiddle so we can see a demo?



    Sorry, I’m a bit too lazy for jsfiddle but here is the code

    				var submit_butt = jQuery(this);
    				submit_butt.attr('disabled', 'disabled');
    					submit_butt.parent().append("<img class='ajax-loader' src='ajax-loader.gif'/>");
    				jQuery(document).ajaxComplete(function(e, xhr, options){;

    My one suggest, and why I was looking for an alternative, is that as is now, if you have other ajax processes going on in the window, then they may trigger ajaxComplete in this code.


    I brought the loading function back in one of the theme am building by using just css.

    1, I added ajax spinner

    2, I changed the button background while loading to make it look disabled.

    below is an example for the post button:

    #buddypress #whats-new-form a.loading,
    #buddypress #whats-new-form input.loading {
    padding-right: 25px ! important;
    background-color:#bbb ! important;
    background-image:url(“/wp-content/themes/your-theme/img/ajax-loader.gif” ) ! important;
    background-position: 93% 50% ! important;
    background-repeat: no-repeat ! important;

    using #buddypress a.loading{} will affect almost all the button.




    Nice, much more elegant @naijaping

    Henry Wright


    @godavid33 and @naijaping – whilst on the subject of preloaders – check out this resource – I’ve found it V useful in the past



    Yo these are great. Love the rainbox and the ouroboro

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Feature Request: Ajax loading spinner’ is closed to new replies.
Skip to toolbar