Как разместить анимацию загрузки внутри поля ввода?

Question

Я хочу разместить свою анимацию загрузки в той же строке, внутри поля ввода, справа.

Я пробовал:

<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> 

я получаю:

я не мог получить его, чтобы показать в моем поле ввода. :(

Answer 1

Попробуйте возиться с абсолютно позиционирования элемента.

скрипку

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

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

Кроме того, вы можете установить, содержащий элементы позиции по относительным, то есть вы можете стиль непосредственно эти размеры, а не документы.

Answer 2

Попробуйте следующее:

1. Место анимации после поля ввода в HTML

2. Набор position: relative; на изображение

   • Позволяет настроить положение элемента, из которого было бы по умолчанию
3. Используйте атрибут CSS top, чтобы сместить анимацию вверх до точки, где она находится непосредственно над полем ввода.

Answer 3

Я согласен с @Sam в том, что это может быть фон элемента, и все, что вам нужно было бы переключать, было бы классом. Если вы установите его, как:

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; 
} 

И тогда вы можете переключать класс, как вы делаете свой Ajax вызов, как:

$(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'); 
     } 
    }); 
}); 

Это, на мой взгляд, было бы самым простым и наиболее эффективный способ сделать это. Если вы хотите, чтобы смотреть дальше, вот fiddle

Answer 4

Место как input и img внутри DIV и сделать это div выглядеть как текстовое поле. В настоящее время я нахожусь на своем телефоне, поэтому это может быть не идеально, но я думаю, вы понимаете.

http://jsfiddle.net/soz8jq2x/

Answer 5

Вы также можете сделать это в качестве фонового изображения в CSS. Просто создайте класс CSS и примените его во время загрузки данных. По завершении вызова Ajax удалите «загружающий» класс CSS из текстового поля ввода.

.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; 
} 

Вы можете увидеть его здесь: http://jsfiddle.net/tejsoft/7pzgtevv/4/

Answer 6

Мое решение: добавить класс к входному элементу, который определяет фоновое изображение, а затем изменить свою позицию фон-позиционным-х и фон-позиционно-у

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

вы ча п также использовать keywoords для postioning

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

или объединить их

background-position: center right; 

то, что вы можете просто добавить или удалить этот класс, чтобы показать/скрыть анимацию