From 97461a51a2dbcdc781f75b7f9bcb95d0e5ce8716 Mon Sep 17 00:00:00 2001
From: "Patrick H. Lauke" <redux@splintered.co.uk>
Date: Thu, 10 Dec 2015 22:29:54 +0000
Subject: [PATCH 1/2] progress bar for IE10+/Edge (radius, use ::-ms-fill, add
 variant mixins, striped support)

---
 scss/_progress.scss        | 15 +++++++++++++--
 scss/mixins/_progress.scss |  5 +++++
 2 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/scss/_progress.scss b/scss/_progress.scss
index 61e13b052..382307b45 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 e174141dc..9622d790b 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 {

From aeb179a3d8d727b58d23250cf89fa0ff63033971 Mon Sep 17 00:00:00 2001
From: "Patrick H. Lauke" <redux@splintered.co.uk>
Date: Thu, 10 Dec 2015 23:11:40 +0000
Subject: [PATCH 2/2] update progress bar documentation

clarify lack of support for striped and animated striped bars in
IE10+/Edge
---
 docs/components/progress.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/components/progress.md b/docs/components/progress.md
index e801373cd..480da4903 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).
 
 <div class="bd-example">
   <progress class="progress progress-striped" value="25" max="100">25%</progress>