How to display loading spinner in a textbox on clicking of a button?

Question

How to display loading spinner in a textbox on clicking of a button? Say I have a username and password textbox, and a login button. Once i enter username and password and click

Answer 1

Just add the "spinner" image as a background image to your inputs when submitting the form :

CSS:

input.spinner {
    background-image:url('spinner.gif');
    background-repeat:no-repeat;
    background-position:5px 5px /* Change to accommodate to your spinner */
}

JS:

$('form').submit(function(e){
    e.preventDefault();
    $f = $(this);
    $f.submit(); /* replace with your ajax call */
    $f.find('input[type="text"], input[type="password"]')
        .val('') /* Remove values or store them if you need them back */
        .addClass("spinner") /* Add the spinning image */
        .attr("disabled", "disabled"); /* Disable the inputs */
});