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

3 Answers 3

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.