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

Question

我正在尝试测试加载动画的概念，但我不知道从哪里开始。基本上，我有一个用页面上的一些 JavaScript 自动填充的文本框，但它可能需要几秒钟才能加载。我正在寻找一种方法来将类似于 IE11 无限时间进度条的内容放入其中。它就像一个大约是盒子宽度的 1/2 且高度只有几个像素的条，它在盒子上动画。像这样:

我如何才能以适用于所有主要浏览器(包括移动浏览器)的方式执行此操作？

Answer 1

这是我的解决方案，希望它能帮助您朝着正确的方向前进(我希望您不介意使用一些 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