Make progress animation respect `$enable-transitions` and `prefers-reduced-motion` media query

Make progress animation respect `$enable-transitions` and `prefers-reduced-motion` media query

1 files changed, 14 insertions, 5 deletions

diff --git a/scss/_progress.scss b/scss/_progress.scss
index 0ac3e0c93..6247abe3f 100644
--- a/scss/_progress.scss
+++ b/scss/_progress.scss
@@ -1,6 +1,9 @@
-@keyframes progress-bar-stripes {
-  from { background-position: $progress-height 0; }
-  to { background-position: 0 0; }
+// Disable animation if transitions are disabled
+@if $enable-transitions {
+  @keyframes progress-bar-stripes {
+    from { background-position: $progress-height 0; }
+    to { background-position: 0 0; }
+  }
 }
 
 .progress {
@@ -29,6 +32,12 @@
   background-size: $progress-height $progress-height;
 }
 
-.progress-bar-animated {
-  animation: progress-bar-stripes $progress-bar-animation-timing;
+@if $enable-transitions {
+  .progress-bar-animated {
+    animation: progress-bar-stripes $progress-bar-animation-timing;
+
+    @media (prefers-reduced-motion: reduce) {
+      animation: none;
+    }
+  }
 }