如何在Internet Explorer 9,10中为Twitter Bootstrap 3进度条设置动画：

Question

如何让Twitter Bootstrap 3进度条在Internet Explorer 9,10中设置动画并显示进度：

当在Mozilla或Chrome中显示时，我可以看到进度指示器移动和剥离动画但不在IE中

这是进度条的div：

<div class="progress progress-striped active" style="width:100px">
    <div id="myprogress"
         class="progress-bar progress-bar-success"
         role="progressbar"
         aria-valuenow="40"
         aria-valuemin="0"
         aria-valuemax="100"
         style="width: 0%">  
    </div>
</div>

我使用默认的jQuery文件上传UI来显示进度：

<script type="text/javascript"
        src="/Content/bootstrap/js/jquery.fileupload.js"></script>

<script type="text/javascript"
        src="/Content/bootstrap/js/jquery.fileupload-ui.js"></script>

Answer 1

进度条中的剥离动画不是IE上的可用功能

来自Docs：

动画

将.active添加到.progress-striped以从右到左为条纹设置动画。 并非在所有版本的IE中都可用。

UPDATE

Bootstrap 3.0.3 -在IE9及以下版本中不可用。

Answer 2

如果浏览器IE lte 9请使用jQuery animate方法。

例：

jQuery('#myprogress').animate({width:'1%'});

同样增加宽度百分比以显示增量。

并为动画条添加以下选择器为IE特定的CSS文件。

创建一个新的CSS文件ie.css如果不存在或任何合适的。

添加此选择器：

.progress-striped .progress-bar {
  background-image: url("an-animated-stripped-image.gif");
  background-repeat: repeat-x;
}

Answer 3

以下是Minddust的Github存储库链接https://github.com/minddust/bootstrap-progressbar

一个bootstrap jquery插件，它扩展了基本的twitter-bootstrap进度条。 它提供了通过添加Javascript以及预先存在的css转换来为进度条设置动画的功能。 此外，您可以在栏中显示当前进度信息或通过回调获取值。

您可以根据自己的便利性将其用于任何活动。