diff --git a/core/includes/theme.inc b/core/includes/theme.inc
index 5998a235b4..5043560a04 100644
--- a/core/includes/theme.inc
+++ b/core/includes/theme.inc
@@ -2046,7 +2046,7 @@ function drupal_common_theme() {
       'variables' => ['url' => NULL, 'title' => NULL],
     ],
     'progress_bar' => [
-      'variables' => ['label' => NULL, 'percent' => NULL, 'message' => NULL],
+      'variables' => ['label' => NULL, 'percent' => NULL, 'message' => NULL, 'animate' => TRUE],
     ],
     'indentation' => [
       'variables' => ['size' => 1],
@@ -2128,3 +2128,14 @@ function drupal_common_theme() {
     ],
   ];
 }
+
+/**
+ * Implements hook_preprocess_HOOK().
+ *
+ * Allow ajax version of progress to be animated.
+ *
+ * @see progress.js
+ */
+function template_preprocess_progress_bar(&$variables) {
+  $variables['#attached']['drupalSettings']['progressBarAnimate'] = $variables['animate'];
+}
diff --git a/core/misc/progress.es6.js b/core/misc/progress.es6.js
index 182c9bfc35..1e1d3a04c8 100644
--- a/core/misc/progress.es6.js
+++ b/core/misc/progress.es6.js
@@ -57,6 +57,11 @@
     // have completed their current activity and not interrupt the screen
     // reader.
     this.element = $(Drupal.theme('progressBar', id));
+
+    // Implement optional animation of progress bar.
+    if (drupalSettings.progressBarAnimate) {
+      $(this.element).find('progress__bar').addClass('progress__bar--animate');
+    }
   };
 
   $.extend(
diff --git a/core/misc/progress.js b/core/misc/progress.js
index fc532a897d..b4a8d4a4ec 100644
--- a/core/misc/progress.js
+++ b/core/misc/progress.js
@@ -16,6 +16,10 @@
     this.updateCallback = updateCallback;
     this.errorCallback = errorCallback;
     this.element = $(Drupal.theme('progressBar', id));
+
+    if (drupalSettings.progressBarAnimate) {
+      $(this.element).find('progress__bar').addClass('progress__bar--animate');
+    }
   };
 
   $.extend(Drupal.ProgressBar.prototype, {
diff --git a/core/modules/system/templates/progress-bar.html.twig b/core/modules/system/templates/progress-bar.html.twig
index 885a80fa2c..93852dfc40 100644
--- a/core/modules/system/templates/progress-bar.html.twig
+++ b/core/modules/system/templates/progress-bar.html.twig
@@ -9,6 +9,10 @@
  * - label: The label of the working task.
  * - percent: The percentage of the progress.
  * - message: A string containing information to be displayed.
+ * - animate: If set, enable the progress bar animation.
+ *
+ * @see template_preprocess_progress_bar()
+ * @see progress.js
  *
  * @ingroup themeable
  */
@@ -17,7 +21,7 @@
   {% if label %}
     <div class="progress__label">{{ label }}</div>
   {% endif %}
-  <div class="progress__track"><div class="progress__bar" style="width: {{ percent }}%"></div></div>
+  <div class="progress__track"><div class="progress__bar{% if animate %} progress__bar--animate{% endif %}" style="width: {{ percent }}%"></div></div>
   <div class="progress__percentage">{{ percent }}%</div>
   <div class="progress__description">{{ message }}</div>
 </div>
diff --git a/core/profiles/demo_umami/themes/umami/css/classy/components/progress.css b/core/profiles/demo_umami/themes/umami/css/classy/components/progress.css
index 47da889350..f6d045b14a 100644
--- a/core/profiles/demo_umami/themes/umami/css/classy/components/progress.css
+++ b/core/profiles/demo_umami/themes/umami/css/classy/components/progress.css
@@ -18,10 +18,6 @@
   margin-top: -1px;
   margin-left: -1px; /* LTR */
   padding: 0 1px;
-  -webkit-transition: width 0.5s ease-out;
-  transition: width 0.5s ease-out;
-  -webkit-animation: animate-stripes 3s linear infinite;
-  -moz-animation: animate-stripes 3s linear infinite;
   border: 1px #07629a solid;
   border-radius: 10em;
   background: #057ec9;
@@ -36,9 +32,6 @@
 [dir="rtl"] .progress__bar {
   margin-right: -1px;
   margin-left: 0;
-  -webkit-animation-direction: reverse;
-  -moz-animation-direction: reverse;
-  animation-direction: reverse;
 }
 
 @media screen and (prefers-reduced-motion: reduce) {
@@ -53,6 +46,18 @@
 /**
  * Progress bar animations.
  */
+.progress__bar--animate {
+  -webkit-transition: width 0.5s ease-out;
+  transition: width 0.5s ease-out;
+  -webkit-animation: animate-stripes 3s linear infinite;
+  -moz-animation: animate-stripes 3s linear infinite;
+  animation: animate-stripes 3s linear infinite;
+}
+[dir="rtl"] .progress__bar--animate {
+  -webkit-animation-direction: reverse;
+  animation-direction: reverse;
+}
+
 @-webkit-keyframes animate-stripes {
   0% { background-position: 0 0, 0 0; }
   100% { background-position: 0 0, -80px 0; }
diff --git a/core/tests/Drupal/KernelTests/Core/Theme/ConfirmClassyCopiesTest.php b/core/tests/Drupal/KernelTests/Core/Theme/ConfirmClassyCopiesTest.php
index f760cf9f0d..19f70506c4 100644
--- a/core/tests/Drupal/KernelTests/Core/Theme/ConfirmClassyCopiesTest.php
+++ b/core/tests/Drupal/KernelTests/Core/Theme/ConfirmClassyCopiesTest.php
@@ -705,7 +705,7 @@ protected function getClassyHash($type, $file) {
         'more-link.css' => 'b2ebfb826e035334340193b42246b180',
         'node.css' => '81ea0a3fef211dbc32549ac7f39ec646',
         'pager.css' => 'd10589366720f9c15b66df434baab4da',
-        'progress.css' => '5147a9b07ede9f456c6a3f3efeb520e1',
+        'progress.css' => '330816d5590e249e3c94d5ff0b8927e8',
         'search-results.css' => 'ce3ca8fcd54e72f142ba29da5a3a5c9a',
         'tabledrag.css' => '98d24ff864c7699dfa6da9190c5e70df',
         'tableselect.css' => '8e966ac85a0cc60f470717410640c8fe',
diff --git a/core/themes/bartik/css/classy/components/progress.css b/core/themes/bartik/css/classy/components/progress.css
index 47da889350..f6d045b14a 100644
--- a/core/themes/bartik/css/classy/components/progress.css
+++ b/core/themes/bartik/css/classy/components/progress.css
@@ -18,10 +18,6 @@
   margin-top: -1px;
   margin-left: -1px; /* LTR */
   padding: 0 1px;
-  -webkit-transition: width 0.5s ease-out;
-  transition: width 0.5s ease-out;
-  -webkit-animation: animate-stripes 3s linear infinite;
-  -moz-animation: animate-stripes 3s linear infinite;
   border: 1px #07629a solid;
   border-radius: 10em;
   background: #057ec9;
@@ -36,9 +32,6 @@
 [dir="rtl"] .progress__bar {
   margin-right: -1px;
   margin-left: 0;
-  -webkit-animation-direction: reverse;
-  -moz-animation-direction: reverse;
-  animation-direction: reverse;
 }
 
 @media screen and (prefers-reduced-motion: reduce) {
@@ -53,6 +46,18 @@
 /**
  * Progress bar animations.
  */
+.progress__bar--animate {
+  -webkit-transition: width 0.5s ease-out;
+  transition: width 0.5s ease-out;
+  -webkit-animation: animate-stripes 3s linear infinite;
+  -moz-animation: animate-stripes 3s linear infinite;
+  animation: animate-stripes 3s linear infinite;
+}
+[dir="rtl"] .progress__bar--animate {
+  -webkit-animation-direction: reverse;
+  animation-direction: reverse;
+}
+
 @-webkit-keyframes animate-stripes {
   0% { background-position: 0 0, 0 0; }
   100% { background-position: 0 0, -80px 0; }
diff --git a/core/themes/classy/css/components/progress.css b/core/themes/classy/css/components/progress.css
index 47da889350..f6d045b14a 100644
--- a/core/themes/classy/css/components/progress.css
+++ b/core/themes/classy/css/components/progress.css
@@ -18,10 +18,6 @@
   margin-top: -1px;
   margin-left: -1px; /* LTR */
   padding: 0 1px;
-  -webkit-transition: width 0.5s ease-out;
-  transition: width 0.5s ease-out;
-  -webkit-animation: animate-stripes 3s linear infinite;
-  -moz-animation: animate-stripes 3s linear infinite;
   border: 1px #07629a solid;
   border-radius: 10em;
   background: #057ec9;
@@ -36,9 +32,6 @@
 [dir="rtl"] .progress__bar {
   margin-right: -1px;
   margin-left: 0;
-  -webkit-animation-direction: reverse;
-  -moz-animation-direction: reverse;
-  animation-direction: reverse;
 }
 
 @media screen and (prefers-reduced-motion: reduce) {
@@ -53,6 +46,18 @@
 /**
  * Progress bar animations.
  */
+.progress__bar--animate {
+  -webkit-transition: width 0.5s ease-out;
+  transition: width 0.5s ease-out;
+  -webkit-animation: animate-stripes 3s linear infinite;
+  -moz-animation: animate-stripes 3s linear infinite;
+  animation: animate-stripes 3s linear infinite;
+}
+[dir="rtl"] .progress__bar--animate {
+  -webkit-animation-direction: reverse;
+  animation-direction: reverse;
+}
+
 @-webkit-keyframes animate-stripes {
   0% { background-position: 0 0, 0 0; }
   100% { background-position: 0 0, -80px 0; }
diff --git a/core/themes/seven/css/classy/components/progress.css b/core/themes/seven/css/classy/components/progress.css
index 47da889350..f6d045b14a 100644
--- a/core/themes/seven/css/classy/components/progress.css
+++ b/core/themes/seven/css/classy/components/progress.css
@@ -18,10 +18,6 @@
   margin-top: -1px;
   margin-left: -1px; /* LTR */
   padding: 0 1px;
-  -webkit-transition: width 0.5s ease-out;
-  transition: width 0.5s ease-out;
-  -webkit-animation: animate-stripes 3s linear infinite;
-  -moz-animation: animate-stripes 3s linear infinite;
   border: 1px #07629a solid;
   border-radius: 10em;
   background: #057ec9;
@@ -36,9 +32,6 @@
 [dir="rtl"] .progress__bar {
   margin-right: -1px;
   margin-left: 0;
-  -webkit-animation-direction: reverse;
-  -moz-animation-direction: reverse;
-  animation-direction: reverse;
 }
 
 @media screen and (prefers-reduced-motion: reduce) {
@@ -53,6 +46,18 @@
 /**
  * Progress bar animations.
  */
+.progress__bar--animate {
+  -webkit-transition: width 0.5s ease-out;
+  transition: width 0.5s ease-out;
+  -webkit-animation: animate-stripes 3s linear infinite;
+  -moz-animation: animate-stripes 3s linear infinite;
+  animation: animate-stripes 3s linear infinite;
+}
+[dir="rtl"] .progress__bar--animate {
+  -webkit-animation-direction: reverse;
+  animation-direction: reverse;
+}
+
 @-webkit-keyframes animate-stripes {
   0% { background-position: 0 0, 0 0; }
   100% { background-position: 0 0, -80px 0; }