javascript - How to Animate Twitter Bootstrap 3 progress bar in Internet Explorer 9, 10: - Stack Overflow

admin管理员组

文章数量:1289957

How can I get Twitter Bootstrap 3 progress bar to animate and display progress in Internet Explorer 9, 10:

When displayed in Mozilla or Chrome I can see the progress indicator moving and stripped animation but not in IE

Here is the div for the progress bar:

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

I am using the default jQuery file upload UI to show progress:

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

How can I get Twitter Bootstrap 3 progress bar to animate and display progress in Internet Explorer 9, 10:

When displayed in Mozilla or Chrome I can see the progress indicator moving and stripped animation but not in IE

Here is the div for the progress bar:

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

I am using the default jQuery file upload UI to show progress:

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

• javascript
• html
• internet-explorer
• twitter-bootstrap

Share Improve this question Follow edited Apr 12, 2014 at 14:04 random_user_name 26.2k77 gold badges8080 silver badges118118 bronze badges asked Oct 22, 2013 at 23:54 MilligranMilligran 3,17199 gold badges4646 silver badges5757 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

Stripped animation in progress bar is not an available feature on IE

From the Docs:

Animated

Add .active to .progress-striped to animate the stripes right to left. Not available in all versions of IE.

UPDATE

Bootstrap 3.0.3 - Not available in IE9 and below.

Use jQuery animate method if browser IE lte 9.

Example:

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

Similarly increase width percentage to show increment.

And for animated strip add below selector for IE specific css file.

Create a new CSS file ie.css if not exists or anything suitable.

Add this selector:

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

Here is the link to Github repository by Minddust https://github./minddust/bootstrap-progressbar

A bootstrap jquery plugin which extends the basic twitter-bootstrap progressbar. It provides the ability to animate the progressbar by adding Javascript in bination with the preexisting css transitions. Additionally you can display the current progress information in the bar or get the value via callback.

You can use it with any Event as per your Convenience.

本文标签：