How to position loading animation inside input box

问题:

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. :(

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

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

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

回答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.

回答4:

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.

回答5:

Place both the input and the img inside a div and make that div look like a text box. I am currently on my phone so it might not be perfect but I think you get the point.

http://jsfiddle.net/soz8jq2x/

回答6:

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

回答7:

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