如何在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来显示进度：

我正在使用默认的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>

- Milligran

Answer 1

进度条中的条带动画在IE上不可用。根据文档:，将 .active 添加到 .progress-striped 可以使条纹从右向左运动。在某些版本的 IE 中不可用。更新：Bootstrap 3.0.3 版本不支持 IE9 及以下版本。

- ɐsɹǝʌ ǝɔıʌ

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;
}

- Vin.AI

Answer 3

这里是 Minddust 的 Github 代码库链接 https://github.com/minddust/bootstrap-progressbar

这是一个 Bootstrap jQuery 插件，它扩展了基本的 Twitter-Bootstrap 进度条。它提供了通过添加 JavaScript 与现有的 CSS 转换来动画化进度条的能力。此外，您可以在栏中显示当前进度信息或通过回调获取值。

您可以根据自己的方便使用任何事件来使用它。

- Harman Preet