This has the dual purpose of letting the user know that the website is "processing", while not allowing them to click the submit button twice.

jQuery

var image = $('<img src="/img/spinner.gif" />'); // preload the spinner
$('input').click(function() {
  $(this).parent().append('<img src="/img/spinner.gif" />');
  $(this).hide();
});

Tags:

2 Comments

  1. I have been trying to do this but the spinner does not rotate…does it rotate only for an ajax request?

    1. You’re not alone! I’ve seen instances where the spinner does not rotate, even though you’d think that an animated gif file would be completely independent of any other type of page rendering (JavaScript). If anyone has any thoughts on this, please share.

Leave a Reply

Your email address will not be published. Required fields are marked *