3

如何让 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>
4

3 回答 3

4

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

从文档：

动画

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

更新

Bootstrap 3.0.3 -在 IE9 及更低版本中不可用。

于 2013-10-23T07:48:26.687 回答
3

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

例子：

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

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

对于动画条添加下面的 IE 特定 css 文件的选择器。

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

添加此选择器：

.progress-striped .progress-bar {
  background-image: url("an-animated-stripped-image.gif");
  background-repeat: repeat-x;
}
于 2013-10-23T08:10:26.003 回答
0

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

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

您可以根据自己的方便将其与任何活动一起使用。

于 2014-03-25T07:08:53.823 回答