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

Question

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>

Answer 1

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.

Answer 2

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