Use CSS animation for console progress (#5871)

jenkinsci · Nov 6, 2021 · c0a03f7 · c0a03f7
1 parent 2c1c5ee
commit c0a03f7
Show file tree

Hide file tree

Showing 7 changed files with 72 additions and 5 deletions.
diff --git a/core/src/main/resources/hudson/model/Run/console.jelly b/core/src/main/resources/hudson/model/Run/console.jelly
@@ -51,8 +51,8 @@ THE SOFTWARE.
         <!-- Do progressive console output -->
         <j:when test="${it.isLogUpdated()}">
           <pre id="out" class="console-output" />
-            <div id="spinner" style="margin-top: 1rem;">
-              <l:spinner />
+            <div id="spinner">
+              <l:progressAnimation/>
             </div>
           <t:progressiveText href="logText/progressiveHtml" idref="out" spinner="spinner"
                startOffset="${offset}" onFinishEvent="jenkins:consoleFinished"/>

diff --git a/core/src/main/resources/hudson/model/TaskAction/log.jelly b/core/src/main/resources/hudson/model/TaskAction/log.jelly
@@ -32,7 +32,7 @@ THE SOFTWARE.
     <j:when test="${it.workerThread.running}">
       <pre id="out" />
       <div id="spinner">
-        <l:spinner />
+        <l:progressAnimation />
       </div>
       <t:progressiveText href="progressiveHtml" idref="out" spinner="spinner" />
     </j:when>

diff --git a/core/src/main/resources/hudson/slaves/SlaveComputer/log.jelly b/core/src/main/resources/hudson/slaves/SlaveComputer/log.jelly
@@ -29,7 +29,7 @@ THE SOFTWARE.
     <l:main-panel>
       <pre id="out" />
       <div id="spinner">
-        <l:spinner />
+        <l:progressAnimation />
       </div>
       <t:progressiveText href="logText/progressiveHtml" idref="out" spinner="spinner" />
       <!-- TODO dubious value: INFO+ shown in logText anyway; FINE- configured in /log/*/ maybe better viewed there

diff --git a/core/src/main/resources/jenkins/management/AsynchronousAdministrativeMonitor/log.groovy b/core/src/main/resources/jenkins/management/AsynchronousAdministrativeMonitor/log.groovy
@@ -33,7 +33,7 @@ l.layout {
         if (my.isFixingActive()) {
             pre(id: "out")
             div(id: "spinner") {
-                l.spinner()
+                l.progessAnimation()
             }
             t.progressiveText(spinner: "spinner", href: "logText/progressiveHtml", idref: "out")
         } else {

diff --git a/core/src/main/resources/lib/layout/progressAnimation.jelly b/core/src/main/resources/lib/layout/progressAnimation.jelly
@@ -0,0 +1,8 @@
+<?jelly escape-by-default='true'?>
+<j:jelly xmlns:j="jelly:core">
+
+<style>
+
+</style>
+<div class="lds-ellipsis"><div></div><div></div><div></div></div>
+</j:jelly>
diff --git a/war/src/main/less/base-styles-v2.less b/war/src/main/less/base-styles-v2.less
@@ -33,6 +33,7 @@ html {
 @import './modules/side-panel-tasks.less';
 @import './modules/side-panel-widgets.less';
 @import './modules/spinner.less';
+@import './modules/progress-animation.less';
 @import './modules/tabs.less';
 @import './modules/tooltips.less';
 @import './modules/panes-and-bigtable.less';

diff --git a/war/src/main/less/modules/progress-animation.less b/war/src/main/less/modules/progress-animation.less
@@ -0,0 +1,58 @@
+/** Original source from loading.io, published under CC0 license */
+
+ .lds-ellipsis {
+    display: inline-block;
+    position: relative;
+    width: 12rem;
+    height: 2.5rem;
+}
+.lds-ellipsis div {
+    position: absolute;
+    top: 1rem;
+    width: .5rem;
+    height: .5rem;
+    border-radius: 50%;
+    background: black; /* fallback for IE11 */
+    background: var(--text-color-secondary);
+    animation-timing-function: cubic-bezier(0, 1, 1, 0);
+}
+.lds-ellipsis div:nth-child(1) {
+    left: 1rem;
+    animation: lds-ellipsis1 0.6s infinite;
+}
+.lds-ellipsis div:nth-child(2) {
+    left: 1rem;
+    animation: lds-ellipsis2 0.6s infinite;
+}
+.lds-ellipsis div:nth-child(3) {
+    left: 4rem;
+    animation: lds-ellipsis2 0.6s infinite;
+}
+.lds-ellipsis div:nth-child(4) {
+    left: 10rem;
+    animation: lds-ellipsis3 0.6s infinite;
+}
+@keyframes lds-ellipsis1 {
+    0% {
+        transform: scale(0);
+    }
+    100% {
+        transform: scale(1);
+    }
+}
+@keyframes lds-ellipsis3 {
+    0% {
+        transform: scale(1);
+    }
+    100% {
+        transform: scale(0);
+    }
+}
+@keyframes lds-ellipsis2 {
+    0% {
+        transform: translate(0, 0);
+    }
+    100% {
+        transform: translate(3rem, 0);
+    }
+}