From 5304da10a6f24088a56c4a00e1d3c7058c7b63fa Mon Sep 17 00:00:00 2001
From: Markus Winter <m.winter@sap.com>
Date: Mon, 19 Feb 2024 14:59:21 +0100
Subject: [PATCH] [JENKINS-69113] renovate progressBar (#8821)

* [JENKINS-69113] renovate progressBar

The progressbar used at various places is replaced by a div/span
compbination and gets a new styling that is in sync with other ui
elements. Mainly it has rounded corners.
The bar is always animated opposed to old behaviour where it was only
animated when the estimated remaining time was unknown. Animation is now
based on css and no longer a gif.
All colors are defined via variables so they can be adjusted by themes.
The build progress bar shown on run and console views is now updated
dynamically.
The progress bar used in progressive rendering is doubled in size to
make it more prominent that it is still running (See [JENKINS-72138],
this doesn't solve the problem but might lower the chance that people
reload the mentioned page because they think nothing happens).

* apply prettier

* scss style

* set status url

the parameters page also includes the buildCaption.jelly. But the js is
using a relative url thus accessing `statusIcon` fails.
Store status url in the div and read from there.

* apply behaviour so tooltip is shown after icon update

fix url

* incorporate feedback

use existing colors
only animate when unknown or with flag
animate via build caption and progressive rendering

* adjust class name

* adjust bg color

* fix style

* sRGB

* avoid j:out

---------

Co-authored-by: Alexander Brandes <mc.cache@web.de>
---
 .../hudson/model/Run/statusIcon.jelly         | 12 ++-
 .../DownloadJob/Installing/status.jelly       |  2 +-
 .../resources/lib/hudson/build-caption.js     | 60 ++++++++++----
 .../resources/lib/hudson/buildCaption.jelly   |  6 +-
 .../lib/hudson/buildProgressBar.jelly         |  7 +-
 .../lib/hudson/buildProgressBar.properties    |  3 +-
 .../lib/hudson/buildProgressBar_bg.properties |  3 +-
 .../lib/hudson/buildProgressBar_ca.properties |  3 +-
 .../lib/hudson/buildProgressBar_cs.properties |  3 +-
 .../lib/hudson/buildProgressBar_da.properties |  3 +-
 .../lib/hudson/buildProgressBar_de.properties |  3 +-
 .../lib/hudson/buildProgressBar_el.properties |  3 +-
 .../lib/hudson/buildProgressBar_es.properties |  3 +-
 .../hudson/buildProgressBar_es_AR.properties  |  3 +-
 .../lib/hudson/buildProgressBar_et.properties |  3 +-
 .../lib/hudson/buildProgressBar_fi.properties |  3 +-
 .../lib/hudson/buildProgressBar_fr.properties |  3 +-
 .../lib/hudson/buildProgressBar_he.properties |  3 +-
 .../lib/hudson/buildProgressBar_hu.properties |  3 +-
 .../lib/hudson/buildProgressBar_it.properties |  3 +-
 .../lib/hudson/buildProgressBar_ja.properties |  3 +-
 .../lib/hudson/buildProgressBar_ko.properties |  3 +-
 .../lib/hudson/buildProgressBar_lt.properties |  3 +-
 .../lib/hudson/buildProgressBar_lv.properties |  3 +-
 .../hudson/buildProgressBar_nb_NO.properties  |  3 +-
 .../lib/hudson/buildProgressBar_nl.properties |  3 +-
 .../lib/hudson/buildProgressBar_pl.properties |  3 +-
 .../hudson/buildProgressBar_pt_BR.properties  |  3 +-
 .../hudson/buildProgressBar_pt_PT.properties  |  3 +-
 .../lib/hudson/buildProgressBar_ro.properties |  3 +-
 .../lib/hudson/buildProgressBar_ru.properties |  3 +-
 .../lib/hudson/buildProgressBar_sk.properties |  3 +-
 .../lib/hudson/buildProgressBar_sl.properties |  3 +-
 .../lib/hudson/buildProgressBar_sr.properties |  3 +-
 .../hudson/buildProgressBar_sv_SE.properties  |  3 +-
 .../lib/hudson/buildProgressBar_tr.properties |  3 +-
 .../hudson/buildProgressBar_zh_TW.properties  |  3 +-
 .../resources/lib/hudson/progressBar.jelly    | 67 ++++++++++------
 .../lib/layout/progressiveRendering.jelly     |  2 +-
 .../progressiveRendering.js                   | 23 ++----
 .../java/hudson/model/AsynchPeopleTest.java   |  6 +-
 war/src/main/scss/components/_index.scss      |  1 +
 .../main/scss/components/_progress-bar.scss   | 79 +++++++++++++++++++
 .../main/webapp/scripts/hudson-behavior.js    |  2 +-
 44 files changed, 229 insertions(+), 134 deletions(-)
 create mode 100644 war/src/main/scss/components/_progress-bar.scss

diff --git a/core/src/main/resources/hudson/model/Run/statusIcon.jelly b/core/src/main/resources/hudson/model/Run/statusIcon.jelly
index 650605c7e025..e481fd48761d 100644
--- a/core/src/main/resources/hudson/model/Run/statusIcon.jelly
+++ b/core/src/main/resources/hudson/model/Run/statusIcon.jelly
@@ -29,8 +29,12 @@ THE SOFTWARE.
 -->
 <?jelly escape-by-default='true'?>
 <st:compress xmlns:j="jelly:core" xmlns:st="jelly:stapler" xmlns:d="jelly:define" xmlns:l="/lib/layout" xmlns:t="/lib/hudson" xmlns:f="/lib/form" xmlns:i="jelly:fmt">
-<st:setHeader name="X-Building" value="${it.building}" />
-<l:ajax>
-  <l:icon alt="${it.iconColor.description}" src="symbol-status-${it.iconColor.iconName}" class="icon-xlg" tooltip="${it.iconColor.description}"/>
-</l:ajax>
+  <st:setHeader name="X-Building" value="${it.building}" />
+  <st:setHeader name="X-Progress" value="${it.executor.progress}" />
+  <st:setHeader name="X-Executor-Runtime" value="${it.executor.timestampString}" />
+  <st:setHeader name="X-Executor-Remaining" value="${it.executor.estimatedRemainingTime}" />
+  <st:setHeader name="X-Executor-Stuck" value="${it.executor.likelyStuck}" />
+  <l:ajax>
+    <l:icon alt="${it.iconColor.description}" src="symbol-status-${it.iconColor.iconName}" class="icon-xlg" tooltip="${it.iconColor.description}"/>
+  </l:ajax>
 </st:compress>
diff --git a/core/src/main/resources/hudson/model/UpdateCenter/DownloadJob/Installing/status.jelly b/core/src/main/resources/hudson/model/UpdateCenter/DownloadJob/Installing/status.jelly
index 69efd8937e8b..278604796fe6 100644
--- a/core/src/main/resources/hudson/model/UpdateCenter/DownloadJob/Installing/status.jelly
+++ b/core/src/main/resources/hudson/model/UpdateCenter/DownloadJob/Installing/status.jelly
@@ -28,6 +28,6 @@ THE SOFTWARE.
     <l:icon class="icon-nobuilt-anime icon-md"/> ${%Installing}
   </div>
   <div style="padding-left: 32px">
-    <t:progressBar pos="${it.percentage}" />
+    <t:progressBar pos="${it.percentage}" animate="true"/>
   </div>
 </j:jelly>
diff --git a/core/src/main/resources/lib/hudson/build-caption.js b/core/src/main/resources/lib/hudson/build-caption.js
index a62e6c482fbe..0dd83654c589 100644
--- a/core/src/main/resources/lib/hudson/build-caption.js
+++ b/core/src/main/resources/lib/hudson/build-caption.js
@@ -1,25 +1,51 @@
 (function () {
   function updateBuildCaptionIcon() {
-    fetch("statusIcon").then((rsp) => {
-      var isBuilding = rsp.headers.get("X-Building");
-      if (isBuilding === "true") {
-        setTimeout(updateBuildCaptionIcon, 5000);
-      } else {
-        var progressBar = document.querySelector(
-          ".build-caption-progress-container",
-        );
-        if (progressBar) {
-          progressBar.style.display = "none";
+    const buildCaption = document.querySelector(".jenkins-build-caption");
+    const url = buildCaption.dataset.statusUrl;
+    fetch(url).then((rsp) => {
+      if (rsp.ok) {
+        let isBuilding = rsp.headers.get("X-Building");
+        if (isBuilding === "true") {
+          setTimeout(updateBuildCaptionIcon, 5000);
+          let progress = rsp.headers.get("X-Progress");
+          let runtime = rsp.headers.get("X-Executor-Runtime");
+          let remaining = rsp.headers.get("X-Executor-Remaining");
+          let stuck = rsp.headers.get("X-Executor-Stuck");
+          let progressBar = document.querySelector(".app-progress-bar");
+          let progressBarDone = document.querySelector(
+            ".app-progress-bar span",
+          );
+          if (progressBar) {
+            let tooltip = progressBar.dataset.tooltipTemplate;
+            tooltip = tooltip.replace("%0", runtime).replace("%1", remaining);
+            progressBar.setAttribute("tooltip", tooltip);
+            progressBar.setAttribute("title", tooltip);
+            Behaviour.applySubtree(progressBar, true);
+            if (stuck === "true") {
+              progressBar.classList.add("app-progress-bar--error");
+            } else {
+              progressBar.classList.remove("app-progress-bar--error");
+            }
+          }
+          if (progressBarDone) {
+            progressBarDone.style.width = `${progress}%`;
+          }
+        } else {
+          let progressBar = document.querySelector(
+            ".build-caption-progress-container",
+          );
+          if (progressBar) {
+            progressBar.style.display = "none";
+          }
         }
+        rsp.text().then((responseText) => {
+          document.querySelector(".jenkins-build-caption svg").outerHTML =
+            responseText;
+          Behaviour.applySubtree(buildCaption, false);
+        });
       }
-      rsp.text().then((responseText) => {
-        document.querySelector(".jenkins-build-caption .icon-xlg").outerHTML =
-          responseText;
-      });
     });
   }
 
-  window.addEventListener("load", function () {
-    window.addEventListener("jenkins:consoleFinished", updateBuildCaptionIcon);
-  });
+  setTimeout(updateBuildCaptionIcon, 5000);
 })();
diff --git a/core/src/main/resources/lib/hudson/buildCaption.jelly b/core/src/main/resources/lib/hudson/buildCaption.jelly
index 6ae79d3b836e..82af767467a8 100644
--- a/core/src/main/resources/lib/hudson/buildCaption.jelly
+++ b/core/src/main/resources/lib/hudson/buildCaption.jelly
@@ -28,7 +28,7 @@ THE SOFTWARE.
 <?jelly escape-by-default='true'?>
 <j:jelly xmlns:j="jelly:core" xmlns:st="jelly:stapler" xmlns:d="jelly:define" xmlns:l="/lib/layout" xmlns:t="/lib/hudson" xmlns:f="/lib/form">
   <div class="jenkins-app-bar">
-    <div class="jenkins-app-bar__content jenkins-build-caption">
+    <div class="jenkins-app-bar__content jenkins-build-caption" data-status-url="${rootURL}/${it.url}statusIcon">
       <l:icon alt="${it.iconColor.description}" src="symbol-status-${it.iconColor.iconName}"
           tooltip="${it.iconColor.description}"/>
       <h1>
@@ -44,9 +44,9 @@ THE SOFTWARE.
                 ${%Progress}:
               </td>
               <td class="build-caption-progress-bar">
-                <t:buildProgressBar build="${it}"/>
+                <t:buildProgressBar build="${it}" animate="true"/>
               </td>
-              <td>
+              <td class="jenkins-table__link">
                 <j:if test="${it.parent.hasAbortPermission()}">
                   <l:stopButton href="stop" confirm="${%confirm(it.fullDisplayName)}"
                           alt="${%cancel}"/>
diff --git a/core/src/main/resources/lib/hudson/buildProgressBar.jelly b/core/src/main/resources/lib/hudson/buildProgressBar.jelly
index 278d6de71b7b..55d2a50c825b 100644
--- a/core/src/main/resources/lib/hudson/buildProgressBar.jelly
+++ b/core/src/main/resources/lib/hudson/buildProgressBar.jelly
@@ -32,9 +32,14 @@ THE SOFTWARE.
     <st:attribute name="executor">
       Executor that's carrying out the build. If null, defaults to "build.executor"
     </st:attribute>
+    <st:attribute name="animate">
+      animate the progress bar
+    </st:attribute>
   </st:documentation>
   <j:set var="executor" value="${executor?:build.executor}" /> <!-- TODO use Executor.of -->
   <t:progressBar tooltip="${%text(executor.timestampString,executor.estimatedRemainingTime)}"
                  red="${executor.isLikelyStuck()}"
-                 pos="${executor.progress}" href="${h.getConsoleUrl(build) ?: (rootURL + '/' + build.url + 'console')}"/>
+                 pos="${executor.progress}" href="${h.getConsoleUrl(build) ?: (rootURL + '/' + build.url + 'console')}"
+                 tooltipTemplate="${%text('%0','%1')}"
+                 animate="${attrs.animate}"/>
 </j:jelly>
diff --git a/core/src/main/resources/lib/hudson/buildProgressBar.properties b/core/src/main/resources/lib/hudson/buildProgressBar.properties
index 7180ca51315f..79737858675a 100644
--- a/core/src/main/resources/lib/hudson/buildProgressBar.properties
+++ b/core/src/main/resources/lib/hudson/buildProgressBar.properties
@@ -19,5 +19,4 @@
 # LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 # OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 # THE SOFTWARE.
-
-text=Started {0} ago<br> Estimated remaining time: {1}
+text=Started {0} ago\n Estimated remaining time: {1}
diff --git a/core/src/main/resources/lib/hudson/buildProgressBar_bg.properties b/core/src/main/resources/lib/hudson/buildProgressBar_bg.properties
index 7c32cd9eb7e7..b7a490b61906 100644
--- a/core/src/main/resources/lib/hudson/buildProgressBar_bg.properties
+++ b/core/src/main/resources/lib/hudson/buildProgressBar_bg.properties
@@ -19,6 +19,5 @@
 # LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 # OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 # THE SOFTWARE.
-
 text=\
- Начало преди {0}<br> Оставащо време: {1}
+ Начало преди {0}\n Оставащо време: {1}
diff --git a/core/src/main/resources/lib/hudson/buildProgressBar_ca.properties b/core/src/main/resources/lib/hudson/buildProgressBar_ca.properties
index 1c92333c89b5..0e07e6f7f0ed 100644
--- a/core/src/main/resources/lib/hudson/buildProgressBar_ca.properties
+++ b/core/src/main/resources/lib/hudson/buildProgressBar_ca.properties
@@ -19,5 +19,4 @@
 # LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 # OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 # THE SOFTWARE.
-
-text=Iniciat fa {0}<br> Temps restant estimat: {1}
+text=Iniciat fa {0}\n Temps restant estimat: {1}
diff --git a/core/src/main/resources/lib/hudson/buildProgressBar_cs.properties b/core/src/main/resources/lib/hudson/buildProgressBar_cs.properties
index 5d0f9f6348bb..3669db0044d3 100644
--- a/core/src/main/resources/lib/hudson/buildProgressBar_cs.properties
+++ b/core/src/main/resources/lib/hudson/buildProgressBar_cs.properties
@@ -19,5 +19,4 @@
 # LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 # OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 # THE SOFTWARE.
-
-text=Začalo před {0}<br> Předpokládáný zbývající čas: {1}
+text=Začalo před {0}\n Předpokládáný zbývající čas: {1}
diff --git a/core/src/main/resources/lib/hudson/buildProgressBar_da.properties b/core/src/main/resources/lib/hudson/buildProgressBar_da.properties
index a31b9fe99037..516c4681af70 100644
--- a/core/src/main/resources/lib/hudson/buildProgressBar_da.properties
+++ b/core/src/main/resources/lib/hudson/buildProgressBar_da.properties
@@ -19,5 +19,4 @@
 # LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 # OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 # THE SOFTWARE.
-
-text=Startet for {0} siden<br/>Estimeret resttid: {1}
+text=Startet for {0} siden\nEstimeret resttid: {1}
diff --git a/core/src/main/resources/lib/hudson/buildProgressBar_de.properties b/core/src/main/resources/lib/hudson/buildProgressBar_de.properties
index b892d9503052..76c4e86fc853 100644
--- a/core/src/main/resources/lib/hudson/buildProgressBar_de.properties
+++ b/core/src/main/resources/lib/hudson/buildProgressBar_de.properties
@@ -19,5 +19,4 @@
 # LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 # OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 # THE SOFTWARE.
-
-text=Gestartet vor {0}<br> Ungefähr verbleibende Zeit: {1}
+text=Gestartet vor {0}\n Ungefähr verbleibende Zeit: {1}
diff --git a/core/src/main/resources/lib/hudson/buildProgressBar_el.properties b/core/src/main/resources/lib/hudson/buildProgressBar_el.properties
index 8960c7257449..45f4088f113a 100644
--- a/core/src/main/resources/lib/hudson/buildProgressBar_el.properties
+++ b/core/src/main/resources/lib/hudson/buildProgressBar_el.properties
@@ -19,5 +19,4 @@
 # LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 # OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 # THE SOFTWARE.
-
-text=Άρχισε πριν από {0}<br>Εκτιμώμενος χρόνος: {1}
+text=Άρχισε πριν από {0}\nΕκτιμώμενος χρόνος: {1}
diff --git a/core/src/main/resources/lib/hudson/buildProgressBar_es.properties b/core/src/main/resources/lib/hudson/buildProgressBar_es.properties
index d73107b5e146..33ef4269d099 100644
--- a/core/src/main/resources/lib/hudson/buildProgressBar_es.properties
+++ b/core/src/main/resources/lib/hudson/buildProgressBar_es.properties
@@ -19,6 +19,5 @@
 # LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 # OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 # THE SOFTWARE.
-
-text=Comenzó hace {0}<br> Tiempo restante estimado: {1}
+text=Comenzó hace {0}\n Tiempo restante estimado: {1}
 
diff --git a/core/src/main/resources/lib/hudson/buildProgressBar_es_AR.properties b/core/src/main/resources/lib/hudson/buildProgressBar_es_AR.properties
index f1a1b5510522..72d26491f0ab 100644
--- a/core/src/main/resources/lib/hudson/buildProgressBar_es_AR.properties
+++ b/core/src/main/resources/lib/hudson/buildProgressBar_es_AR.properties
@@ -1,3 +1,2 @@
 # This file is under the MIT License by authors
-
-text=Inicio hace {0}<br/> Tiempo estimado restante: {1}
+text=Inicio hace {0}\n Tiempo estimado restante: {1}
diff --git a/core/src/main/resources/lib/hudson/buildProgressBar_et.properties b/core/src/main/resources/lib/hudson/buildProgressBar_et.properties
index e4562ec799e3..7d459abe07a2 100644
--- a/core/src/main/resources/lib/hudson/buildProgressBar_et.properties
+++ b/core/src/main/resources/lib/hudson/buildProgressBar_et.properties
@@ -1,3 +1,2 @@
 # This file is under the MIT License by authors
-
-text=Alustas {0} tagasi<br> Arvatavasti lõpetab kell {1}
+text=Alustas {0} tagasi\n Arvatavasti lõpetab kell {1}
diff --git a/core/src/main/resources/lib/hudson/buildProgressBar_fi.properties b/core/src/main/resources/lib/hudson/buildProgressBar_fi.properties
index da8da8efb4bc..37d535a1cf62 100644
--- a/core/src/main/resources/lib/hudson/buildProgressBar_fi.properties
+++ b/core/src/main/resources/lib/hudson/buildProgressBar_fi.properties
@@ -19,5 +19,4 @@
 # LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 # OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 # THE SOFTWARE.
-
-text=Aloitettiin {0} sitten<br> Arvioitu valmistumisaika: {1}
+text=Aloitettiin {0} sitten\n Arvioitu valmistumisaika: {1}
diff --git a/core/src/main/resources/lib/hudson/buildProgressBar_fr.properties b/core/src/main/resources/lib/hudson/buildProgressBar_fr.properties
index 9b2e0020badf..f1fd0cae0ca1 100644
--- a/core/src/main/resources/lib/hudson/buildProgressBar_fr.properties
+++ b/core/src/main/resources/lib/hudson/buildProgressBar_fr.properties
@@ -19,5 +19,4 @@
 # LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 # OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 # THE SOFTWARE.
-
-text=Démarré il y a {0}<br/> Temps restant estimé : {1}
+text=Démarré il y a {0}\n Temps restant estimé : {1}
diff --git a/core/src/main/resources/lib/hudson/buildProgressBar_he.properties b/core/src/main/resources/lib/hudson/buildProgressBar_he.properties
index 244a58b2a86f..5a99b51ee948 100644
--- a/core/src/main/resources/lib/hudson/buildProgressBar_he.properties
+++ b/core/src/main/resources/lib/hudson/buildProgressBar_he.properties
@@ -19,5 +19,4 @@
 # LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 # OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 # THE SOFTWARE.
-
-text=התחיל לפני {0} <br> זמן מוערך לסיום: {1}
+text=התחיל לפני {0} \n זמן מוערך לסיום: {1}
diff --git a/core/src/main/resources/lib/hudson/buildProgressBar_hu.properties b/core/src/main/resources/lib/hudson/buildProgressBar_hu.properties
index 667355a9082a..6bf8ee4a86ab 100644
--- a/core/src/main/resources/lib/hudson/buildProgressBar_hu.properties
+++ b/core/src/main/resources/lib/hudson/buildProgressBar_hu.properties
@@ -19,5 +19,4 @@
 # LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 # OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 # THE SOFTWARE.
-
-text={0} óta fut.<br> Körülbelül {1} van hátra.
+text={0} óta fut.\n Körülbelül {1} van hátra.
diff --git a/core/src/main/resources/lib/hudson/buildProgressBar_it.properties b/core/src/main/resources/lib/hudson/buildProgressBar_it.properties
index 71c9f95eee49..4eeb6debbeb2 100644
--- a/core/src/main/resources/lib/hudson/buildProgressBar_it.properties
+++ b/core/src/main/resources/lib/hudson/buildProgressBar_it.properties
@@ -20,5 +20,4 @@
 # LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 # OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 # THE SOFTWARE.
-
-text=Avviato {0} fa<br>Tempo rimanente stimato: {1}
+text=Avviato {0} fa\nTempo rimanente stimato: {1}
diff --git a/core/src/main/resources/lib/hudson/buildProgressBar_ja.properties b/core/src/main/resources/lib/hudson/buildProgressBar_ja.properties
index 005ff3ce7314..6d59a08f340a 100644
--- a/core/src/main/resources/lib/hudson/buildProgressBar_ja.properties
+++ b/core/src/main/resources/lib/hudson/buildProgressBar_ja.properties
@@ -19,5 +19,4 @@
 # LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 # OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 # THE SOFTWARE.
-
-text=開始時間: {0}<br>予想残り時間: {1}
+text=開始時間: {0}\n予想残り時間: {1}
diff --git a/core/src/main/resources/lib/hudson/buildProgressBar_ko.properties b/core/src/main/resources/lib/hudson/buildProgressBar_ko.properties
index 57b3efb2627e..f5f8d8e99240 100644
--- a/core/src/main/resources/lib/hudson/buildProgressBar_ko.properties
+++ b/core/src/main/resources/lib/hudson/buildProgressBar_ko.properties
@@ -19,5 +19,4 @@
 # LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 # OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 # THE SOFTWARE.
-
-text="{0} 전에 시작<br> 예상 잔여 시간: {1}"
+text="{0} 전에 시작\n 예상 잔여 시간: {1}"
diff --git a/core/src/main/resources/lib/hudson/buildProgressBar_lt.properties b/core/src/main/resources/lib/hudson/buildProgressBar_lt.properties
index 71923e22a813..6ec176d00658 100644
--- a/core/src/main/resources/lib/hudson/buildProgressBar_lt.properties
+++ b/core/src/main/resources/lib/hudson/buildProgressBar_lt.properties
@@ -19,5 +19,4 @@
 # LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 # OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 # THE SOFTWARE.
-
-text=Pradėta prieš {0}<br> Numatoma, kad liko: {1}
+text=Pradėta prieš {0}\n Numatoma, kad liko: {1}
diff --git a/core/src/main/resources/lib/hudson/buildProgressBar_lv.properties b/core/src/main/resources/lib/hudson/buildProgressBar_lv.properties
index ae687f204415..e4769dc0dfe6 100644
--- a/core/src/main/resources/lib/hudson/buildProgressBar_lv.properties
+++ b/core/src/main/resources/lib/hudson/buildProgressBar_lv.properties
@@ -19,5 +19,4 @@
 # LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 # OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 # THE SOFTWARE.
-
-text=Sāka pirms {0}<br> Palicis aptuveni: {1}
+text=Sāka pirms {0}\n Palicis aptuveni: {1}
diff --git a/core/src/main/resources/lib/hudson/buildProgressBar_nb_NO.properties b/core/src/main/resources/lib/hudson/buildProgressBar_nb_NO.properties
index 4f290df312dd..614ef9d508a2 100644
--- a/core/src/main/resources/lib/hudson/buildProgressBar_nb_NO.properties
+++ b/core/src/main/resources/lib/hudson/buildProgressBar_nb_NO.properties
@@ -19,5 +19,4 @@
 # LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 # OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 # THE SOFTWARE.
-
-text=Startet for {0} siden<br> Anslått gjenstående tid: {1}
+text=Startet for {0} siden\n Anslått gjenstående tid: {1}
diff --git a/core/src/main/resources/lib/hudson/buildProgressBar_nl.properties b/core/src/main/resources/lib/hudson/buildProgressBar_nl.properties
index 8fc7e2cf5157..981b42a56422 100644
--- a/core/src/main/resources/lib/hudson/buildProgressBar_nl.properties
+++ b/core/src/main/resources/lib/hudson/buildProgressBar_nl.properties
@@ -19,5 +19,4 @@
 # LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 # OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 # THE SOFTWARE.
-
-text=Gestart {0} geleden<br> Geschatte resterende duur: {1}
+text=Gestart {0} geleden\n Geschatte resterende duur: {1}
diff --git a/core/src/main/resources/lib/hudson/buildProgressBar_pl.properties b/core/src/main/resources/lib/hudson/buildProgressBar_pl.properties
index e8fa04a17af4..3ee56ad38286 100644
--- a/core/src/main/resources/lib/hudson/buildProgressBar_pl.properties
+++ b/core/src/main/resources/lib/hudson/buildProgressBar_pl.properties
@@ -19,5 +19,4 @@
 # LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 # OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 # THE SOFTWARE.
-
-text=Zaczęto {0} ago <br> spodziewany czas do końca {1}
+text=Zaczęto {0} ago \n spodziewany czas do końca {1}
diff --git a/core/src/main/resources/lib/hudson/buildProgressBar_pt_BR.properties b/core/src/main/resources/lib/hudson/buildProgressBar_pt_BR.properties
index 31773c0704c0..50102609d51e 100644
--- a/core/src/main/resources/lib/hudson/buildProgressBar_pt_BR.properties
+++ b/core/src/main/resources/lib/hudson/buildProgressBar_pt_BR.properties
@@ -19,5 +19,4 @@
 # LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 # OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 # THE SOFTWARE.
-
-text=Iniciado {0} atrás <br> Tempo estimado restante: {1}
+text=Iniciado {0} atrás \n Tempo estimado restante: {1}
diff --git a/core/src/main/resources/lib/hudson/buildProgressBar_pt_PT.properties b/core/src/main/resources/lib/hudson/buildProgressBar_pt_PT.properties
index ccd4635ee3db..831c689d561b 100644
--- a/core/src/main/resources/lib/hudson/buildProgressBar_pt_PT.properties
+++ b/core/src/main/resources/lib/hudson/buildProgressBar_pt_PT.properties
@@ -19,5 +19,4 @@
 # LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 # OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 # THE SOFTWARE.
-
-text=Começou {0} atrás<br> Tempo que falta (estimativa): {1}
+text=Começou {0} atrás\n Tempo que falta (estimativa): {1}
diff --git a/core/src/main/resources/lib/hudson/buildProgressBar_ro.properties b/core/src/main/resources/lib/hudson/buildProgressBar_ro.properties
index f9de9a4114f0..2ba7adea6173 100644
--- a/core/src/main/resources/lib/hudson/buildProgressBar_ro.properties
+++ b/core/src/main/resources/lib/hudson/buildProgressBar_ro.properties
@@ -19,5 +19,4 @@
 # LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 # OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 # THE SOFTWARE.
-
-text=Început {0} in urma<br> Timp rămas estimat: {1}
+text=Început {0} in urma\n Timp rămas estimat: {1}
diff --git a/core/src/main/resources/lib/hudson/buildProgressBar_ru.properties b/core/src/main/resources/lib/hudson/buildProgressBar_ru.properties
index 48db34192769..4298ee956a01 100644
--- a/core/src/main/resources/lib/hudson/buildProgressBar_ru.properties
+++ b/core/src/main/resources/lib/hudson/buildProgressBar_ru.properties
@@ -19,5 +19,4 @@
 # LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 # OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 # THE SOFTWARE.
-
-text=Запущено {0}<br> Приблизительное время завершения: {1}
+text=Запущено {0}\n Приблизительное время завершения: {1}
diff --git a/core/src/main/resources/lib/hudson/buildProgressBar_sk.properties b/core/src/main/resources/lib/hudson/buildProgressBar_sk.properties
index 276494a2c086..f1d5b15afd99 100644
--- a/core/src/main/resources/lib/hudson/buildProgressBar_sk.properties
+++ b/core/src/main/resources/lib/hudson/buildProgressBar_sk.properties
@@ -19,5 +19,4 @@
 # LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 # OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 # THE SOFTWARE.
-
-text=Spustené pred {0} <br> Predpokladaný zostávajúci čas: {1}
+text=Spustené pred {0} \n Predpokladaný zostávajúci čas: {1}
diff --git a/core/src/main/resources/lib/hudson/buildProgressBar_sl.properties b/core/src/main/resources/lib/hudson/buildProgressBar_sl.properties
index 83dc1e3b3f4c..dec8839a7d5f 100644
--- a/core/src/main/resources/lib/hudson/buildProgressBar_sl.properties
+++ b/core/src/main/resources/lib/hudson/buildProgressBar_sl.properties
@@ -1,3 +1,2 @@
 # This file is under the MIT License by authors
-
-text=Startan pred {0}<br> Predviden preostali čas: {1}
+text=Startan pred {0}\n Predviden preostali čas: {1}
diff --git a/core/src/main/resources/lib/hudson/buildProgressBar_sr.properties b/core/src/main/resources/lib/hudson/buildProgressBar_sr.properties
index d7577b0f4bb9..1f9dca50c98c 100644
--- a/core/src/main/resources/lib/hudson/buildProgressBar_sr.properties
+++ b/core/src/main/resources/lib/hudson/buildProgressBar_sr.properties
@@ -1,3 +1,2 @@
 # This file is under the MIT License by authors
-
-text=Започето пре {0} <br> Очекивано преостало време: {1}
+text=Започето пре {0} \n Очекивано преостало време: {1}
diff --git a/core/src/main/resources/lib/hudson/buildProgressBar_sv_SE.properties b/core/src/main/resources/lib/hudson/buildProgressBar_sv_SE.properties
index d3f29fbb3c26..daabc84a088f 100644
--- a/core/src/main/resources/lib/hudson/buildProgressBar_sv_SE.properties
+++ b/core/src/main/resources/lib/hudson/buildProgressBar_sv_SE.properties
@@ -19,5 +19,4 @@
 # LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 # OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 # THE SOFTWARE.
-
-text=Startade för {0} sedan<br>Beräknad återstående tid: {1}
+text=Startade för {0} sedan\nBeräknad återstående tid: {1}
diff --git a/core/src/main/resources/lib/hudson/buildProgressBar_tr.properties b/core/src/main/resources/lib/hudson/buildProgressBar_tr.properties
index 115f0c6d225c..17b89a6a42ae 100644
--- a/core/src/main/resources/lib/hudson/buildProgressBar_tr.properties
+++ b/core/src/main/resources/lib/hudson/buildProgressBar_tr.properties
@@ -19,5 +19,4 @@
 # LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 # OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 # THE SOFTWARE.
-
-text="{0} önce başladı<br> Kalan tahmini süre: {1}"
+text="{0} önce başladı\n Kalan tahmini süre: {1}"
diff --git a/core/src/main/resources/lib/hudson/buildProgressBar_zh_TW.properties b/core/src/main/resources/lib/hudson/buildProgressBar_zh_TW.properties
index 6e460654d1e0..0058bb37fc84 100644
--- a/core/src/main/resources/lib/hudson/buildProgressBar_zh_TW.properties
+++ b/core/src/main/resources/lib/hudson/buildProgressBar_zh_TW.properties
@@ -20,5 +20,4 @@
 # LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 # OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 # THE SOFTWARE.
-
-text={0}前開始<br /> 預計還要: {1}
+text={0}前開始\n 預計還要: {1}
diff --git a/core/src/main/resources/lib/hudson/progressBar.jelly b/core/src/main/resources/lib/hudson/progressBar.jelly
index 2aa585cc6cd8..b4e230263bcc 100644
--- a/core/src/main/resources/lib/hudson/progressBar.jelly
+++ b/core/src/main/resources/lib/hudson/progressBar.jelly
@@ -22,29 +22,48 @@ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 THE SOFTWARE.
 -->
 
-<!--
-  Progress bar. @pos (0-100) specifies the current position
-
-  Attributes:
-    pos  : 0-100 to indicates the current progress. -1 if the progress is unknown
-    href : if set, the progress bar becomes a hyperlink
-    red  : if set to non-null, the progress bar will be drawn in red, to indicate that the processing is likely stuck.
--->
 <?jelly escape-by-default='true'?>
-<j:jelly xmlns:j="jelly:core" xmlns:x="jelly:xml" xmlns:st="jelly:stapler" xmlns:d="jelly:define" xmlns:l="/lib/layout" xmlns:t="/lib/hudson" xmlns:f="/lib/form">
-  <table class="progress-bar ${attrs.red?'red':null}" id="${attrs.id}" tooltip="${attrs.tooltip}" href="${attrs.href}" style="${attrs.href!=null ? 'cursor:pointer' : null}">
-    <j:choose>
-      <j:when test="${pos lt 0}">
-        <!-- style sheet will fill in the progress bar image -->
-        <tbody><tr class="unknown"><td/></tr></tbody>
-      </j:when>
-      <j:otherwise>
-          <tbody><tr>
-            <td class="progress-bar-done" style="width:${pos}%;"/>
-            <td class="progress-bar-left" style="width:${100-pos}%"/>
-          </tr>
-        </tbody>
-      </j:otherwise>
-    </j:choose>
-  </table>
+<j:jelly xmlns:j="jelly:core" xmlns:x="jelly:xml" xmlns:st="jelly:stapler">
+  <st:documentation>
+    <st:attribute name="pos" use="required">
+      0-100 to indicates the current progress. -1 if the progress is unknown
+    </st:attribute>
+    <st:attribute name="href" use="optional">
+      if set, the progress bar becomes a hyperlink
+    </st:attribute>
+    <st:attribute name="red" use="optional">
+      if set to non-null, the progress bar will be drawn in red, to indicate that the processing is likely stuck.
+    </st:attribute>
+    <st:attribute name="id" use="optional">
+      If set, id will be the identifier for the component
+    </st:attribute>
+    <st:attribute name="large" use="optional">
+      If set, the progress bar will have the double size
+    </st:attribute>
+    <st:attribute name="tooltip" use="optional">
+      Tooltip with more progress details.
+    </st:attribute>
+    <st:attribute name="tooltipTemplate" use="optional">
+      Template for the tooltip, so the tooltip can be updated dynamically via javascript. Used by buildCaption.
+    </st:attribute>
+    <st:attribute name="animate" use="optional">
+      If set the progress bar will be animated. Animation will also be used when the current progress is unknown.
+    </st:attribute>
+  </st:documentation>
+  <j:set var="animate" value="${(attrs.animate != null || attrs.pos lt 0) ? 'app-progress-bar--animate' : null}"/>
+  <x:element name="${attrs.href != null ? 'a' : 'div'}">
+    <x:attribute name="class">app-progress-bar ${attrs.large?'app-progress-bar--large':null} ${attrs.red?'app-progress-bar--error':null}</x:attribute>
+    <x:attribute name="href">${attrs.href}</x:attribute>
+    <x:attribute name="tooltip">${attrs.tooltip}</x:attribute>
+    <x:attribute name="id">${attrs.id}</x:attribute>
+    <x:attribute name="data-tooltip-template">${attrs.tooltipTemplate}</x:attribute>
+      <j:choose>
+        <j:when test="${pos lt 0}">
+          <span class="${animate} app-progress-bar--unknown"/>
+        </j:when>
+        <j:otherwise>
+          <span class="${animate}" style="width: ${pos}%;"/>
+        </j:otherwise>
+      </j:choose>
+  </x:element>
 </j:jelly>
\ No newline at end of file
diff --git a/core/src/main/resources/lib/layout/progressiveRendering.jelly b/core/src/main/resources/lib/layout/progressiveRendering.jelly
index fa774db2c367..4fa9f22012d8 100644
--- a/core/src/main/resources/lib/layout/progressiveRendering.jelly
+++ b/core/src/main/resources/lib/layout/progressiveRendering.jelly
@@ -36,7 +36,7 @@ THE SOFTWARE.
     </st:documentation>
     <st:adjunct includes="lib.layout.progressiveRendering.progressiveRendering"/>
     <j:set var="id" value="${h.generateId()}"/>
-    <t:progressBar id="${id}" pos="0" tooltip="${tooltip ?: '%progressMessage'}"/>
+    <t:progressBar id="${id}" pos="0" tooltip="${tooltip ?: '%progressMessage'}" large="true" animate="true"/>
     <st:bind var="proxy" value="${handler}" />
     <div class="progressive-rendering-information-holder" data-id="${id}" data-callback="${callback}" />
 </j:jelly>
diff --git a/core/src/main/resources/lib/layout/progressiveRendering/progressiveRendering.js b/core/src/main/resources/lib/layout/progressiveRendering/progressiveRendering.js
index 3d674da73218..67aa7550648e 100644
--- a/core/src/main/resources/lib/layout/progressiveRendering/progressiveRendering.js
+++ b/core/src/main/resources/lib/layout/progressiveRendering/progressiveRendering.js
@@ -30,24 +30,17 @@ function progressivelyRender(handler, callback, statusId) {
       document.getElementById(statusId).style.display = "none";
     } else if (r.status == "canceled") {
       // TODO ugly; replace with single tr of class=unknown?
-      document.querySelector("#" + statusId + " .progress-bar-done").innerHTML =
-        "Aborted.";
+      document.querySelector("#" + statusId + " span").innerHTML = "Aborted.";
     } else if (r.status == "error") {
-      document.querySelector(
-        "#" + statusId + " .progress-bar-done",
-      ).style.width = "100%";
-      document.querySelector(
-        "#" + statusId + " .progress-bar-left",
-      ).style.width = "0%";
-      document.getElementById(statusId).className = "progress-bar red";
+      document.querySelector("#" + statusId + " span").style.width = "100%";
+      document.getElementById(statusId).classList.add("red");
+      document
+        .getElementById(statusId)
+        .classList.remove("app-progress-bar--animate");
     } else {
       callback(r.data);
-      document.querySelector(
-        "#" + statusId + " .progress-bar-done",
-      ).style.width = 100 * r.status + "%";
-      document.querySelector(
-        "#" + statusId + " .progress-bar-left",
-      ).style.width = 100 - 100 * r.status + "%";
+      document.querySelector("#" + statusId + " span").style.width =
+        100 * r.status + "%";
       checkNewsLater(500);
     }
   }
diff --git a/test/src/test/java/hudson/model/AsynchPeopleTest.java b/test/src/test/java/hudson/model/AsynchPeopleTest.java
index a3b5ccc5404c..ab0671e91667 100644
--- a/test/src/test/java/hudson/model/AsynchPeopleTest.java
+++ b/test/src/test/java/hudson/model/AsynchPeopleTest.java
@@ -48,10 +48,10 @@ public class AsynchPeopleTest {
         HtmlPage page = wc.goTo("asynchPeople");
         assertEquals(0, wc.waitForBackgroundJavaScript(120000));
         boolean found = false;
-        for (DomElement table : page.getElementsByTagName("table")) {
-            if (table.getAttribute("class").contains("progress-bar")) {
+        for (DomElement div : page.getElementsByTagName("div")) {
+            if (div.getAttribute("class").contains("app-progress-bar")) {
                 found = true;
-                assertEquals("display: none;", table.getAttribute("style"));
+                assertEquals("display: none;", div.getAttribute("style"));
                 break;
             }
         }
diff --git a/war/src/main/scss/components/_index.scss b/war/src/main/scss/components/_index.scss
index 70a4f6f62dd7..8551ffb500c4 100644
--- a/war/src/main/scss/components/_index.scss
+++ b/war/src/main/scss/components/_index.scss
@@ -13,6 +13,7 @@
 @use "page-header";
 @use "panes-and-bigtable";
 @use "progress-animation";
+@use "progress-bar";
 @use "row-selection-controller";
 @use "section";
 @use "side-panel-tasks";
diff --git a/war/src/main/scss/components/_progress-bar.scss b/war/src/main/scss/components/_progress-bar.scss
new file mode 100644
index 000000000000..1e1faf37d630
--- /dev/null
+++ b/war/src/main/scss/components/_progress-bar.scss
@@ -0,0 +1,79 @@
+.app-progress-bar {
+  --color: var(--accent-color);
+
+  height: 12px;
+  width: 104px;
+  padding: 2px;
+  border-radius: 6px;
+  background-color: color-mix(
+    in sRGB,
+    var(--text-color-secondary) 25%,
+    transparent
+  );
+  margin-top: 2px;
+  display: block;
+  opacity: 1 !important;
+
+  &--error > span {
+    --color: var(--error-color);
+  }
+
+  &--unknown {
+    width: 100%;
+  }
+
+  &--large {
+    height: 24px;
+    width: 208px;
+    padding: 4px;
+    border-radius: 12px;
+
+    & > span {
+      border-radius: 8px !important;
+    }
+  }
+
+  & > span {
+    height: 100%;
+    min-width: 8%;
+    background-color: var(--color);
+    display: block;
+    border-radius: 4px;
+  }
+
+  &--animate {
+    background-image: linear-gradient(
+      -45deg,
+      var(--background) 25%,
+      transparent 25%,
+      transparent 50%,
+      var(--background) 50%,
+      var(--background) 75%,
+      transparent 75%,
+      transparent
+    );
+    z-index: 1;
+    background-size: 25px 25px;
+    animation: progress-bar 5s linear infinite;
+
+    @keyframes progress-bar {
+      0% {
+        background-position: 0 0;
+      }
+
+      100% {
+        background-position: 25px 25px;
+      }
+    }
+  }
+
+  &:link {
+    &:hover {
+      opacity: 0.75 !important;
+    }
+
+    &:active {
+      opacity: 0.5 !important;
+    }
+  }
+}
diff --git a/war/src/main/webapp/scripts/hudson-behavior.js b/war/src/main/webapp/scripts/hudson-behavior.js
index e51831bb97cf..77735d6c178d 100644
--- a/war/src/main/webapp/scripts/hudson-behavior.js
+++ b/war/src/main/webapp/scripts/hudson-behavior.js
@@ -1229,7 +1229,7 @@ function rowvgStartEachRow(recursive, f) {
   });
 
   Behaviour.specify(
-    "TABLE.progress-bar",
+    "TABLE.progress-bar, div.app-progress-bar",
     "table-progress-bar",
     ++p,
     function (e) {