如何在 Internet Explorer 9、10: 中制作 Twitter Bootstrap 3 进度条动画

How to Animate Twitter Bootstrap 3 progress bar in Internet Explorer 9, 10:

本文关键字：Bootstrap Twitter 动画 Internet Explorer      更新时间：2023-09-26

如何让 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>
进度

条中的剥离动画在IE上不可用

从文档中：

动画

将 .active 添加到 .progress-striped 以从右到左对条纹进行动画处理。并非在所有版本的 IE 中都可用。

更新

引导程序 3.0.3 - 在 IE9 及更低版本中不可用。

如果浏览器IE lte 9，请使用jQuery动画方法。

例：

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

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

一个引导 jquery 插件，它扩展了基本的 twitter-bootstrap 进度条。它提供了通过添加Javascript与预先存在的css过渡相结合来对进度条进行动画处理的功能。此外，您可以在栏中显示当前进度信息或通过回调获取值。

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

相关文章：