web-dev-qa-db-fra.com

Comment afficher le chargement de spinner dans une zone de texte en cliquant sur un bouton?

Comment afficher le chargement de spinner dans une zone de texte en cliquant sur un bouton? Dites que j'ai une zone de texte de nom d'utilisateur et mot de passe, et un bouton de connexion. Une fois que je saisis le nom d'utilisateur et le mot de passe et que je clique sur le bouton Login, les fileuses doivent être affichées dans les zones de texte. Aide aimablement. Je suis à la recherche d'une option JQuery ou Javascript.

jqueryspinnerloading
10
Bino

Disons que votre code HTML a la zone de texte suivante:

<input id='inputsource' />

Définir une nouvelle classe css 

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

puis en ajoutant cette classe à votre testbox avec le code jQuery:

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

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

48
Mayank Jaiswal

Ajoutez simplement l'image "spinner" en tant qu'image d'arrière-plan à vos entrées lors de la soumission du formulaire:

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