Jelajahi Sumber

Add a spinner on the loading page

Gaël Métais 10 tahun lalu
induk
melakukan
7b6b7bc58d

+ 12 - 0
app/node_views/launchTest.html

@@ -33,20 +33,32 @@
                 statusElement.innerHTML = 'Waiting behind ' + (position) + ' other tests';
             }
             sendPositionInQueueToGA(position);
+
+            // Rotate the spinner
+            document.body.className = 'waiting';
         });
 
         socket.on('complete', function() {
             statusElement.innerHTML = 'Test complete';
             window.location.replace('/results/' + testId);
+
+            // Stop the spinner
+            document.body.className = '';
         });
 
         socket.on('failed', function() {
             statusElement.innerHTML = 'Test failed';
             window.location.replace('/results/' + testId);
+
+            // Stop the spinner
+            document.body.className = '';
         });
 
         socket.on('404', function() {
             statusElement.innerHTML = 'Test not found';
+
+            // Stop the spinner
+            document.body.className = '';
         });
 
         askStatus();

+ 14 - 0
app/public/styles/launchTest.css

@@ -1,4 +1,18 @@
 #status {
     margin-top: 2em;
     font-size: 2.5em;
+}
+
+@-webkit-keyframes rotating {
+    from { -webkit-transform: rotate(0deg); }
+    to { -webkit-transform: rotate(360deg); }
+}
+@keyframes rotating {
+    from { transform: rotate(0deg); }
+    to { transform: rotate(360deg); }
+}
+
+.waiting .icon-lab {
+    -webkit-animation: rotating 3s linear 0s infinite;
+    animation: rotating 3s linear 0s infinite;
 }

+ 3 - 0
app/public/styles/less/main.less

@@ -26,6 +26,9 @@ input[type=submit] {
 }
 
 h1 span {
+    display: inline-block;
+    height: 1em;
+    width: 1em;
     color: #ffa319;
 }
 

+ 3 - 0
app/public/styles/main.css

@@ -26,6 +26,9 @@ input[type=submit] {
   cursor: pointer;
 }
 h1 span {
+  display: inline-block;
+  height: 1em;
+  width: 1em;
   color: #ffa319;
 }
 .footer {