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

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

J’ai essayé :

    

Je reçois :

entrez la description de l'image ici

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

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://soffr.miximages.com/javascript/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/

Je suis d’accord avec @Sam en ce que cela pourrait être l’arrière-plan de l’élément, et 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://soffr.miximages.com/javascript/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

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.

Essayez ce qui suit:

  1. Placez l’animation après le champ de saisie dans le code HTML
  2. Position 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’atsortingbut CSS top pour déplacer l’animation vers le haut, à l’endroit où elle se trouve directement au-dessus du champ de saisie.

Placez à la fois l’ input et l’ img dans une div et faites en sorte que cette 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 comprenez.

http://jsfiddle.net/soz8jq2x/

Ma solution: append une classe à l’élément d’entrée qui définit une image d’arrière-plan, puis modifier sa position avec background-position-x et background-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 append ou supprimer cette classe pour afficher / masquer l’animation