如何让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>
发布于 2013-10-23 07:48:27
进度条中的剥离动画在IE上不可用
从
动画
将.active添加到.progress-striped以从右到左设置条纹动画。并非所有版本的IE都提供。
更新
Bootstrap 3.0.3 -在IE9及更低版本中不可用。
发布于 2013-10-23 08:10:26
如果浏览器为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;
}
发布于 2014-03-25 07:08:54
这是Minddust https://github.com/minddust/bootstrap-progressbar到Github存储库的链接
一个bootstrap jquery插件,它扩展了基本的twitter-bootstrap进度条。它提供了通过将Javascript与先前存在的css过渡相结合来为进度条添加动画的能力。此外,您还可以在栏中显示当前进度信息或通过回调获取该值。
根据您的方便,您可以在任何事件中使用它。
https://stackoverflow.com/questions/19530361
复制相似问题