javascript - 输入字段的背景作为进度条

Question

我想在输入字段中实现一个进程栏。使用 OK 发送输入后，我想转移字段并显示一个简短的过程栏。我还没有找到任何现有的 jquery 解决方案，但如果有人知道某事......

这是我当前的解决方案，适用于缩放 1px png。 http://jsfiddle.net/kaLbrg6w/

我只想定义一个像这样的字段集，后面没有任何其他 div:

<fieldset>
    <input name="name" type="text">
</fieldset>

然后用 css 和 js 做进度条。有没有更好的方法，也许不加载任何图像，来实现进度条并为其设置动画？

编辑还没有js。计划是动画化(像这样伪造:http://jsfiddle.net/kaLbrg6w/1/)BG 图像宽度的进度。我还考虑过在输入字段后面或上方添加一个 div 来为其设置动画，但我想检查一个不需要使用额外元素的解决方案。

Answer 1

这个 jQuery 将模拟 1100 毫秒的进度，它几乎会卡在最后，直到服务器返回响应。

    $('#myForm').on('submit', function(){
        $("#bar").show();
        var w = $('#bar').width() - 20;
        $('#progress').animate({ width: w }, 1000);
        $.post(YOURAJAX).success(function(r){
            $('#progress').animate({ width: w+20 }, 100);
            //code
        });
    });

使用这种 HTML :

<fieldset>
   <div id="bar">
      <div id="progress"></div>
   </div>
   <input name="name" type="text">
</fieldset>

和CSS:

#bar { display:none;width: 500px; position: relative; overflow: hidden; height: 20px;}
#progress {width: 0px; background-color: blue; height: 100%;}

当然这只是一个例子。