Add a spinner on the loading page
This commit is contained in:
@@ -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();
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
@@ -26,6 +26,9 @@ input[type=submit] {
|
||||
}
|
||||
|
||||
h1 span {
|
||||
display: inline-block;
|
||||
height: 1em;
|
||||
width: 1em;
|
||||
color: #ffa319;
|
||||
}
|
||||
|
||||
|
||||
@@ -26,6 +26,9 @@ input[type=submit] {
|
||||
cursor: pointer;
|
||||
}
|
||||
h1 span {
|
||||
display: inline-block;
|
||||
height: 1em;
|
||||
width: 1em;
|
||||
color: #ffa319;
|
||||
}
|
||||
.footer {
|
||||
|
||||
Reference in New Issue
Block a user