在JavaScript中设置文本框边框的动画

我正在尝试测试加载动画的概念，但我不知道从哪里开始。基本上，我有一个文本框，在页面上自动填充一些JavaScript，但加载可能需要几秒钟。我正在寻找一种方法，将类似IE11无限期进度条的东西放在它里面。它就像一个约为长方体宽度1/2的条形图，高度只有几个像素，可以在整个长方体上设置动画。大概是这样的：

---

我怎样才能在所有主流浏览器（包括手机）中都能正常工作

浏览器静态渲染边框

关于设置文本框边框的动画（假定输入：text或textarea）跨borwser和跨平台是不可能的。对于较小范围的浏览器，比如说现代浏览器，有css-level3，带有

边框图像

但这将是痛苦的

关于在文本框上显示进度条，这将非常容易，特别是如果您的内容是通过AJAX加载的。这都是关于容器显示位置绝对左上角。然后css动画化容器

---

查看jquery ui或在网上搜索“动画进度条”

这是我的解决方案，希望它能帮助您朝着正确的方向发展（我希望您不介意使用一些jquery）：

HTML

<div id="container">
    <div id="loading_bar"></div>
    <input type="text" value="" id="input">
</div>

jQuery

function to_zero(){
    $("#loading_bar").css({'width':'0'});
}

function to_max(){
    $("#loading_bar").animate({'width':'300px'}, 2000);
}


setInterval( function(){to_zero();to_max(); }, 2200);

---

我总是做两次跨距。你有一个作为包装，100像素。然后，作为加载的百分比，另一个跨度是x像素宽

然后，您可以使用setTimeout函数来保持动画的运行。减慢添加像素的速度，直到内部跨距与包装跨距一样宽

---

这应该加载得很快。

你能在代码中添加一个JSFIDLE吗？@Daniel:我想还没有代码。你考虑过一个动画.gif图像吗？比css+javascript更有效。是的。。。现在没有太多代码可以显示；它只是一个输入标记（type设置为text）。不过，如果你愿意，我可以做一个；）@芥末粉不，很酷。但是当你指的是“动画制作”时，你的意思是像一个从左到右的无限循环，直到到达终点，然后重复还是；谢谢它可以在我的手机上使用，我猜它可以在桌面上使用；我可以在一个小时左右办理登机手续。它需要一些修改，但现在我知道了我需要的所有CSS。

function to_zero(){
    $("#loading_bar").css({'width':'0'});
}

function to_max(){
    $("#loading_bar").animate({'width':'300px'}, 2000);
}


setInterval( function(){to_zero();to_max(); }, 2200);