如何在输入框中定位加载动画？ [英] How to position loading animation inside input box?

问题描述

我试过了：

我想将我的加载动画放在我的输入框中的同一行上。

 < span> 
< input id =searchboxplaceholder =Enter Catalog＃type =text/> 
< img style =float：right; id ='loading'width =100pxsrc =http://rpg.drivethrustuff.com/shared_images/ajax-loader.gif/> 
< / span> 
  

我得到：

我无法展示它在我的输入框中。 ：

解决方案

您也可以将它作为CSS中的背景图片来创建。加载数据Ajax调用完成后，从文本输入框中移除loadingCSS类。

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

您可以在此查看： http://jsfiddle.net/tejsoft/7pzgtevv/4/

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

解决方案

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/

这篇关于如何在输入框中定位加载动画？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！