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).
25% 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 {