So you have a button on your website which when you click it makes an ajax call to some script, but you dont have any way of telling the user that its loading completed or failed!

With this simple jQuery script you can!

Screen Shots

Buttons before click

Buttons on click

Buttons Complete (successful)

Buttons Complete (error)

To get this functionality you just need to include the javascript file and add one line of code and add a unique id tag to your button.

$('button').ajaxbuttonindicator();

Variables

There are a few variables that you can set to customise the images.

$('button').ajaxbuttonindicator({'loader_img':'http://your/loading_image.gif',
'error_img': 'http://your/error_image.png',
'complete_img': 'http://your/complete_image.png'});

Demo

Ajax Button Indicator demo

Download

Ajax button Indicator download

PS: If the time between loading and complete is too fast – put a sleep into your backend code
A PHP Example is:

sleep(2); // sleep for 2 seconds.