¿Cómo se muestra la carga de la ruleta en un cuadro de texto al hacer clic en un botón?

Question

¿Cómo se muestra la carga de la ruleta en un cuadro de texto al hacer clic en un botón? Supongamos que tengo un cuadro de texto de nombre de usuario y contraseña, y un botón de inicio de sesión. Una vez que ingrese el nombre de usuario y la contraseña, y haga clic en el botón Iniciar sesión, los marcadores deben mostrarse en los cuadros de texto. Amablemente ayuda. Estoy buscando una opción JQuery o Javascript.

Answer 1

Sólo tiene que añadir la imagen "Spinner" como imagen de fondo a sus entradas al presentar el formulario:

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

digamos que su html tiene siguiente cuadro de texto:

<input id='inputsource' /> 

definir una nueva clase css

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

y luego agregar esta clase a su caja de ensayo por código jQuery:

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

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