Simplify observations spinner
Nikos Roussos
parent
8133560a33
commit
506ece5b1c
|
|
@ -242,11 +242,6 @@ footer {
|
|||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.graph-spinner {
|
||||
width:50px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
#spinner-data {
|
||||
#loading {
|
||||
display: none;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,96 +0,0 @@
|
|||
@-webkit-keyframes three-quarters {
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
-moz-transform: rotate(0deg);
|
||||
-ms-transform: rotate(0deg);
|
||||
-o-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: rotate(360deg);
|
||||
-moz-transform: rotate(360deg);
|
||||
-ms-transform: rotate(360deg);
|
||||
-o-transform: rotate(360deg);
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@-moz-keyframes three-quarters {
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
-moz-transform: rotate(0deg);
|
||||
-ms-transform: rotate(0deg);
|
||||
-o-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: rotate(360deg);
|
||||
-moz-transform: rotate(360deg);
|
||||
-ms-transform: rotate(360deg);
|
||||
-o-transform: rotate(360deg);
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@-o-keyframes three-quarters {
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
-moz-transform: rotate(0deg);
|
||||
-ms-transform: rotate(0deg);
|
||||
-o-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: rotate(360deg);
|
||||
-moz-transform: rotate(360deg);
|
||||
-ms-transform: rotate(360deg);
|
||||
-o-transform: rotate(360deg);
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes three-quarters {
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
-moz-transform: rotate(0deg);
|
||||
-ms-transform: rotate(0deg);
|
||||
-o-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: rotate(360deg);
|
||||
-moz-transform: rotate(360deg);
|
||||
-ms-transform: rotate(360deg);
|
||||
-o-transform: rotate(360deg);
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
/* Styles for old versions of IE */
|
||||
.three-quarters {
|
||||
font-family: sans-serif;
|
||||
font-weight: 100;
|
||||
}
|
||||
|
||||
/* :not(:required) hides this rule from IE9 and below */
|
||||
.three-quarters:not(:required) {
|
||||
-webkit-animation: three-quarters 1250ms infinite linear;
|
||||
-moz-animation: three-quarters 1250ms infinite linear;
|
||||
-ms-animation: three-quarters 1250ms infinite linear;
|
||||
-o-animation: three-quarters 1250ms infinite linear;
|
||||
animation: three-quarters 1250ms infinite linear;
|
||||
border: 8px solid purple;
|
||||
border-right-color: transparent;
|
||||
border-radius: 16px;
|
||||
box-sizing: border-box;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
text-indent: -9999px;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
|
|
@ -34,9 +34,9 @@ $( document ).ready( function(){
|
|||
|
||||
$.ajax({
|
||||
url: '/prediction_windows/' + satellite + '/' + start_time + '/' + end_time + '/',
|
||||
beforeSend: function() { $('#spinner-data').show(); }
|
||||
beforeSend: function() { $('#loading').show(); }
|
||||
}).done(function(data) {
|
||||
$('#spinner-data').hide();
|
||||
$('#loading').hide();
|
||||
if (data['error']) {
|
||||
var error_msg = data['error'];
|
||||
$('#timeline').empty();
|
||||
|
|
|
|||
|
|
@ -35,7 +35,7 @@ $(document).ready(function() {
|
|||
var wavesurfer = Object.create(WaveSurfer);
|
||||
var data_payload_url = $(this).data('payload');
|
||||
var container_el = '#data-' + wid;
|
||||
var loading = '#spinner-data-' + wid;
|
||||
var loading = '#loading';
|
||||
|
||||
wavesurfer.init({
|
||||
container: container_el,
|
||||
|
|
|
|||
|
|
@ -100,9 +100,7 @@
|
|||
<div class="row calculation-result">
|
||||
<div class="col-md-12">
|
||||
<h3>Calculated Timeline</h3>
|
||||
<div class="graph-spinner">
|
||||
<div class="three-quarters" id="spinner-data">loading...</div>
|
||||
</div>
|
||||
<div id="loading" class="notice">Calculating</div>
|
||||
<div id="timeline">
|
||||
</div>
|
||||
<div id="hoverRes">
|
||||
|
|
|
|||
|
|
@ -81,9 +81,7 @@
|
|||
</div>
|
||||
<div class="panel-body">
|
||||
{% if data.payload %}
|
||||
<div class="graph-spinner">
|
||||
<div class="three-quarters" id="spinner-data-{{ data.id }}">loading...</div>
|
||||
</div>
|
||||
<div id="loading" class="notice">Loading data</div>
|
||||
<div class="wave" id="data-{{ data.id }}"></div>
|
||||
{% else %}
|
||||
<div class="notice">
|
||||
|
|
|
|||
Loading…
Reference in New Issue