web-dev-qa-db-fra.com

Comment positionner l'animation de chargement dans la zone de saisie?

Je souhaite positionner mon animation de chargement sur la même ligne, à l'intérieur de ma zone de saisie, à droite.

J'ai essayé : 

<span>
    <input id="searchbox" placeholder="Enter Catalog # " type="text" />
    <img style="float:right;" id='loading' width="100px" src="http://rpg.drivethrustuff.com/shared_images/ajax-loader.gif"/> 
</span>

Je reçois : 

enter image description here

Je ne pouvais pas le faire apparaître dans ma boîte de saisie. :(

javascriptjqueryhtmlcsstwitter-bootstrap
9
iori

Vous pouvez également le faire en tant qu'image d'arrière-plan en CSS. Créez simplement une classe CSS et appliquez-la au moment du chargement des données. Une fois l'appel Ajax terminé, supprimez la classe CSS "en cours de chargement" de la zone de saisie de texte. 

.loading {    
    background-color: #ffffff;
    background-image: url("http://loadinggif.com/images/image-selection/3.gif");
    background-size: 25px 25px;
    background-position:right center;
    background-repeat: no-repeat;
}

Vous pouvez le voir ici: http://jsfiddle.net/tejsoft/7pzgtevv/4/

29
TejSoft

Je suis d'accord avec @Sam en ce que cela pourrait être l'arrière-plan de l'élément et que tout ce que vous auriez à basculer serait une classe. Si vous le configurez comme:

input {
    box-sizing: border-box;
    border: 1px solid #ccc;
    height: 30px;
    padding: 10px;
}
input.loading {
    background: url(http://www.xiconeditor.com/image/icons/loading.gif) no-repeat right center;
}

Et ensuite, vous pouvez basculer la classe pendant que vous passez votre appel ajax comme ceci: 

$(document).on('blur', 'input', function(e) {
    var $t = $(e.currentTarget);
    $t.addClass('loading');
    $.ajax({
        url: $t.data('ajax'),
        success: function(data) {
            //dostuff
            $t.removeClass('loading');
        }
    });
});

Ce serait, à mon avis, le moyen le plus simple et le plus efficace de le faire. Si vous voulez regarder plus loin, voici un violon

9
Chad

Placez les input et les img dans un div et faites en sorte que div ressemble à une zone de texte. Je suis actuellement sur mon téléphone, donc ce n'est peut-être pas parfait, mais je pense que vous avez compris. 

http://jsfiddle.net/soz8jq2x/

0
ByteHamster

Essayez de jouer avec le positionnement absolu de l'élément.

violon

img {
    position: absolute;
    left: 112px;
    top: -22px;
}

https://jsfiddle.net/kmbxawdd/2/

En outre, vous pouvez définir la position relative des éléments contenant cette option, ce qui signifie que vous pouvez appliquer directement un style à ces dimensions plutôt qu'aux documents. 

0
Jack hardcastle

Essayez ce qui suit:

  1. Placez l'animation après le champ de saisie dans le code HTML

  2. Définissez position: relative; sur l'image

    • Permet de modifier la position de l'élément à partir de l'endroit où il se trouverait par défaut
  3. Utilisez l'attribut CSS top pour décaler l'animation au point où elle se trouve directement au-dessus du champ de saisie.
0
Sildoreth

Ma solution: ajouter une classe à l'élément d'entrée qui définit une image de fond, puis modifier sa position avecbackground-position-xetbackground-position-y

.Loading {
    background-image: url("bg.gif");
    background-repeat: no-repeat ;
    background-position-x: 99% ;
    background-position-y: 50% ;
}

vous pouvez également utiliser des keywoords pour le positionnement

background-position-x: right;
background-position-y: center;

ou les combiner

background-position: center right;

ensuite, vous pouvez simplement ajouter ou supprimer cette classe pour afficher/masquer l'animation

0
Souhaieb Besbes

il suffit d'inclure l'élément <img> dans l'élément <input>.Vous pouvez ensuite utiliser js pour afficher et masquer cette image à l'aide de l'attribut id.

<img class="loading" src="http://loadinggif.com/images/image-selection/3.gif" id="img-loading">

.loading {    
    position: absolute;
    top: 206px;
    right: 30px;
    display: none;
}
0
Optimaz ID