diff --git a/core/src/main/resources/hudson/model/ManageJenkinsAction/index.jelly b/core/src/main/resources/hudson/model/ManageJenkinsAction/index.jelly
index a345052bc588..b10ff2f880df 100644
--- a/core/src/main/resources/hudson/model/ManageJenkinsAction/index.jelly
+++ b/core/src/main/resources/hudson/model/ManageJenkinsAction/index.jelly
@@ -38,6 +38,10 @@ THE SOFTWARE.
+
+
+
+
diff --git a/core/src/main/resources/lib/hudson/progressBar.jelly b/core/src/main/resources/lib/hudson/progressBar.jelly
index 2aa585cc6cd8..7e6b4dcbeda8 100644
--- a/core/src/main/resources/lib/hudson/progressBar.jelly
+++ b/core/src/main/resources/lib/hudson/progressBar.jelly
@@ -22,29 +22,29 @@ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.
-->
-
-
-
-
-
-
- |
-
-
-
- |
- |
-
-
-
-
-
-
\ No newline at end of file
+
+
+
+ 0-100 to indicates the current progress. -1 if the progress is unknown
+
+
+ if set, the progress bar becomes a hyperlink
+
+
+ if set to non-null, the progress bar will be drawn in red, to indicate that the processing is likely stuck.
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/war/src/main/scss/components/_spinner.scss b/war/src/main/scss/components/_spinner.scss
index a538e89c355c..1a379dff45b8 100644
--- a/war/src/main/scss/components/_spinner.scss
+++ b/war/src/main/scss/components/_spinner.scss
@@ -88,3 +88,51 @@
transform: scale(0.75);
}
}
+
+.progresss {
+ --color: var(--accent-color);
+
+ appearance: none;
+ height: 4px;
+
+ &::-webkit-progress-bar {
+ background: color-mix(in srgb, var(--text-color-secondary) 30%, transparent);
+ border-radius: 10px;
+ }
+
+ &::-webkit-progress-value {
+ background: var(--color);
+ border-radius: 10px;
+ }
+
+ &--red {
+ --color: var(--error-color);
+ }
+}
+
+.progressss {
+ --color: var(--accent-color);
+
+ background: color-mix(in srgb, var(--text-color-secondary) 30%, transparent);
+ height: 4px;
+ width: 100px;
+ border-radius: 10px;
+ overflow: hidden;
+
+ & > div {
+ height: 100%;
+ width: 60px;
+ border-radius: 10px;
+ background: var(--color);
+ animation: frankenstein 1.2s linear infinite;
+ }
+}
+
+@keyframes frankenstein {
+ from {
+ translate: -100% 0;
+ }
+ to {
+ translate: 100px 0;
+ }
+}