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 :

enter image description here

I couldn't get it to show inside my input box. :(

Try setting the image as the background of the input element. — Sam, Mar 02 '15 at 15:59
In my case, it is a loading animation. It doesn't display all the time. It's only display when my application is trying to query data out of my database. I am not sure - if setting it as a background image would be the best way to do. :D — iori, Mar 02 '15 at 16:03
You could set it as the background of the input with a specific class, so `input.loading { background: url(...) }` and then just toggle that class whenever you want to load stuff. — Chad, Mar 02 '15 at 16:17
@Chad : Your suggestion might be the solution. I hope you don't mind provide more details by answer this question for all of us. — iori, Mar 02 '15 at 16:27

score 44 · Answer 1 · answered Mar 03 '15 at 03:25

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/

score 11 · Answer 2 · answered Mar 02 '15 at 16:35

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

@iori yes it does, just applied it on the blur of the input, so when you focus out of it. — Chad, Mar 02 '15 at 19:29
Holy crap! I spent so many hours trying to make a reusable select loader with a wrapper div. I had never even though about using gif as background. SO MUCH EASIER!!! Thank you — M H, Dec 20 '17 at 16:46

score 2 · Answer 3 · answered Mar 02 '15 at 16:01

2

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.

answered Mar 02 '15 at 16:01

Jack hardcastle

2,748
4
22
40

I am not sure if this would be the ideal solution, because, what if the user display it on tablets, or phones ? – iori Mar 02 '15 at 16:14
I respect that completely, but `position: absolute; left: 112px; top: -22px;` will place my loading animation in the absolute position, and I am not sure that this might be the best way to do it. – iori Mar 02 '15 at 16:21
Which would still work fine on phones assuming it's in a relative container @lori – Jack hardcastle Mar 02 '15 at 16:22

score 1 · Answer 4 · answered Feb 11 '16 at 13:30

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

score 0 · Answer 5 · answered Mar 02 '15 at 16:02

0

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.

answered Mar 02 '15 at 16:02

Sildoreth

1,883
1
25
38

1

I am not sure if this would be the ideal solution, because, what if the user display it on tablets, or phones ? – iori Mar 02 '15 at 16:05
I am not the one that did that. I swear. – iori Mar 02 '15 at 16:05
@iori The device shouldn't matter. – Sildoreth Mar 02 '15 at 16:06
I tried `position: relative; top: 20%; float: right;' I feel like my top property doesn't work, and the loading animation is still displaying outside of the input box. Any thoughts ? – iori Mar 02 '15 at 16:19
Try using a negative pixel offset for `top`. – Sildoreth Mar 02 '15 at 18:12

score 0 · Answer 6 · answered Mar 02 '15 at 16:36

0

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/

answered Mar 02 '15 at 16:36

ByteHamster

4,884
9
38
53

score 0 · Answer 7 · edited Jan 10 '19 at 15:10

0

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

edited Jan 10 '19 at 15:10

brooksrelyt

3,925
5
31
54

answered Jan 10 '19 at 14:45

Optimaz Prime

857
10
11

this wont be responsive! – Ashwant Manikoth Aug 20 '19 at 05:19

How to position loading animation inside input box?

7 Answers7

Linked