How to place loading animation inside input field?

Question

I want to place my loading animation on the same line inside the input box on the right.

I tried:

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

I get:

I could not get it to display inside the input field .:(

Answer 1

You can also do this as a background image in CSS. Just create a CSS class and apply it while loading data. When the Ajax call completes, remove the “loading” CSS class from the input text box.

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

You can watch it here: http://jsfiddle.net/tejsoft/7pzgtevv/4/

Answer 2

I agree with @Sam that this could be the background of the element, and all you would need to switch would be a class. If you configured it like this:

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

And then you can switch the class when you make your ajax call, for example:

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

This, in my opinion, would be the easiest and most effective way to do this. If you want to look further here fiddle

Answer 3

Try messing around with absolutely positioning the element.

violin

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

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

In addition, you can set the position of the contained elements to relative, which means that you can directly use these dimensions, not documents.

Answer 4

Try the following:

• Place animation after input field in HTML

• Set position: relative; per image

  • Allows you to adjust the position of the element at which it will be by default.
• Use the top CSS attribute to move the animation up to the point where it is directly above the input field.

Answer 5

Place both input and img inside the div and make the div look like a text box. I'm currently on my phone, so it may not be perfect, but I think you understand.

http://jsfiddle.net/soz8jq2x/

Answer 6

My solution: add a class to the input element that defines the background image, then change its position using background-position-x and background-position-y

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

you can also use keywoords to publish

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

or combine them

 background-position: center right; 

then you can simply add or remove this class to show / hide the animation

Answer 7

Just include the <img> element, the <input> <img> element <input> Then you can use js to show and hide this image using the id attribute.

 <img class="loading" src="http://loadinggif.com/images/image-selection/3.gif" id="img-loading"> .loading { position: absolute; top: 206px; right: 30px; display: none; }