本文介绍了如何在输入框中定位加载动画?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我试过了:
我想将我的加载动画放在我的输入框中的同一行上。 < 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;
}
您可以在此查看:
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/
这篇关于如何在输入框中定位加载动画?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!