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 :

Solution 1:

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: 25px25px;
    background-position:right center;
    background-repeat: no-repeat;
}

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

Solution 2:

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

Solution 3:

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.

Solution 4:

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

Solution 5:

Try the following:

Place the animation after the input field in the HTML
Set position: relative; on the image
- Allows you to tweak the position of the element from where it would be by default
Use the top CSS attribute to shift the animation upward to the point where it is directly on top of the input field.

javascript nyumon