diff --git a/docs/components/progress.md b/docs/components/progress.md
index e801373cd1..480da4903e 100644
--- a/docs/components/progress.md
+++ b/docs/components/progress.md
@@ -60,7 +60,7 @@ Uses a gradient to create a striped effect.
The striped gradient can also be animated. Add `.progress-animated` to `.progress` to animate the stripes right to left via CSS3 animations.
-**Animated progress bars do not work in IE9 and Opera 12** as they don't support CSS3 animations.
+**Animated progress bars do not work in IE9 and Opera 12** – as they don't support CSS3 animations – **nor in IE10+ and Microsoft Edge** – as they currently don't support CSS3 animations on the [`::-ms-fill` pseudo-element](https://msdn.microsoft.com/en-us/library/windows/apps/hh465757.aspx).
diff --git a/scss/_progress.scss b/scss/_progress.scss
index 61e13b0528..382307b45a 100644
--- a/scss/_progress.scss
+++ b/scss/_progress.scss
@@ -19,12 +19,19 @@
margin-bottom: $spacer-y;
}
.progress[value] {
- // IE10 uses `color` to set the bar background-color
- color: #0074d9;
+ // Set overall background
+ background-color: #eee;
// Remove Firefox and Opera border
border: 0;
// Reset the default appearance
appearance: none;
+ // Set overall border radius
+ @include border-radius($border-radius);
+}
+.progress[value]::-ms-fill {
+ background-color: #0074d9;
+ // Remove right-hand border of value bar from IE10+/Edge
+ border: 0;
}
.progress[value]::-webkit-progress-bar {
background-color: #eee;
@@ -111,6 +118,10 @@
@include gradient-striped();
background-size: $spacer-y $spacer-y;
}
+.progress-striped[value]::-ms-fill {
+ @include gradient-striped();
+ background-size: $spacer-y $spacer-y;
+}
// IE9
@media screen and (min-width:0\0) {
.progress-bar-striped {
diff --git a/scss/mixins/_progress.scss b/scss/mixins/_progress.scss
index e174141dc8..9622d790b2 100644
--- a/scss/mixins/_progress.scss
+++ b/scss/mixins/_progress.scss
@@ -9,6 +9,11 @@
background-color: $color;
}
+ // IE10+, Microsoft Edge
+ &[value]::-ms-fill {
+ background-color: $color;
+ }
+
// IE9
@media screen and (min-width:0\0) {
.progress-bar {