Come visualizzare lo spinner di caricamento in una casella di testo quando si fa clic su un pulsante?

Question

Come visualizzare lo spinner di caricamento in una casella di testo quando si fa clic su un pulsante? Dire che ho un nome utente e password casella di testo, e un pulsante di accesso. Una volta immesso il nome utente e la password e facendo clic sul pulsante Accedi, gli spinners dovrebbero essere visualizzati nelle caselle di testo. Gentilmente aiuto. Iam cerca un'opzione JQuery o Javascript.

Answer 1

Basta aggiungere l'immagine "filatrice" come immagine di sfondo per gli ingressi al momento della presentazione del modulo:

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 */ 
}); 

Answer 2

Diciamo tuo html ha seguente casella di testo:

<input id='inputsource' /> 

definire una nuova classe CSS

.loadinggif 
{ 
    background: 
    url('http://www.hsi.com.hk/HSI-Net/pages/images/en/share/ajax-loader.gif') 
    no-repeat 
    right center; 
} 

e poi l'aggiunta di questa classe per il vostro Testbox dal codice jQuery:

$('#inputsource').addClass('loadinggif'); 

Jsfiddle: http://jsfiddle.net/msjaiswal/FAVN5/