Merge pull request #18531 from patrickhlauke/ie-edge-progressbar

progress bar for IE10+/Edge (border radius, use ::-ms-fill, variant mixins, striped)

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>

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 {

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 {