在JavaScript中动画文本框的边框

Question

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

如何以适用于所有主流浏览器（包括移动设备）的方式执行此操作？

Answer 1

浏览器静态渲染边框;

关于动画TextBox的边框（假设输入：text或textarea），cross-borwser和跨平台是不可能的。对于较小范围的浏览器，例如现代浏览器，有border-image的css-level3。

但这将是痛苦的。

关于在TextBox上显示进度条，它会更容易，特别是如果您的内容是通过AJAX加载的。这是关于容器显示位置绝对左上方。然后css动画容器。

请参阅jquery-ui或在网上搜索“animated progess bar”

Answer 2

这是我的解决方案，希望它能帮助你朝着正确的方向前进（我希望你不介意使用一些jQuery）：

<强> HTML

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

<强> CSS

#input { 
    width:296px; 
    padding:2px;
    position:absolute; 
    top:0; 
    left: 0;
    border:1px solid #ddd; 
    margin:0; 
    z-index:1;
}

#container { 
    position:relative;
    background:#ddd;
}

#loading_bar { 
    width:0; 
    padding:0;
    margin:0;
    background:#00f; 
    height:4px;
    position:absolute;
    top:2px;
    left:0;
    z-index:2;
}

<强>的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);

DEMO

Answer 3

我总是做2次跨度。你有一个作为包装，100px。然后，作为加载的百分比，您只需要另一个跨度为x像素宽。

然后你可以创建一个setTimeout函数来保持动画的运行。减慢添加像素直到内部跨度与包装跨度一样宽。

这应该加载非常快。