How to position loading animation inside input box

Question

I want to position my loading animation on the same line, inside my input box, to 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 couldn't get it to show inside my input box. :(

Answer 1

My solution: add a class to the input element that defines a background image, then modify its position with 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 for postioning

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

or combine them

background-position: center right;

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

Answer 2

Try the following:

1. Place the animation after the input field in the HTML

2. Set position: relative; on the image

   • Allows you to tweak the position of the element from where it would be by default
3. Use the top CSS attribute to shift the animation upward to the point where it is directly on top of the input field.

Answer 3

You can also do it as a background image in CSS. Just create a CSS class and apply at the time of loading the data. After Ajax call is completed remove the "loading" CSS class from the text input 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 view it here: http://jsfiddle.net/tejsoft/7pzgtevv/4/

Answer 4

Try fiddling around with absolutely positioning the element.

fiddle

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

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

Furthermore, you can set the containing elements position to relative, meaning you can style directly to these dimensions rather than the documents.

Answer 5

just include <img> element inside <input> element.then you can use js to show and hide this image using 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;
}

Answer 6

I agree with @Sam in that it could be the background of the element, and all you'd have to toggle would be a class. If you set it up like:

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 toggle the class as you're making your ajax call like:

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

That, in my opinion, would be the simplest and most effective way of doing it. If you want to look further, here's a fiddle