diff --git a/web/static/css/main.css b/web/static/css/main.css index dfd5d31..0bd53fc 100755 --- a/web/static/css/main.css +++ b/web/static/css/main.css @@ -225,6 +225,23 @@ ul li { } } +@-ms-keyframes spin { + from { -ms-transform: rotate(0deg); } + to { -ms-transform: rotate(360deg); } +} +@-moz-keyframes spin { + from { -moz-transform: rotate(0deg); } + to { -moz-transform: rotate(360deg); } +} +@-webkit-keyframes spin { + from { -webkit-transform: rotate(0deg); } + to { -webkit-transform: rotate(360deg); } +} +@keyframes spin { + from { transform:rotate(0deg); } + to { transform:rotate(360deg); } +} + /** MEDIA QUERIES *************************************************************/ @media all and (max-width: 980px) { diff --git a/web/static/js/swapp.js b/web/static/js/swapp.js index 386e095..ffd08dd 100644 --- a/web/static/js/swapp.js +++ b/web/static/js/swapp.js @@ -52,11 +52,15 @@ stopped_at = this.stopped_at.format("YYYY-MM-DDTHH:mm:ss"); console.info("Setting time interval from " + started_at + " to " + stopped_at + "…"); active_targets.forEach(function(target){ + var targetButton; console.info("Loading CSV data of " + target.name + "…"); + targetButton = $(".orbiters_filters .target." + target.slug); + targetButton.addClass('loading'); return this$.loadData(target.slug, started_at, stopped_at).then(function(data){ console.info("Loaded CSV data of " + target.name + "."); this$.createTimeSeries(target, data); - return this$.orbits.initOrbiter(target.slug, target.config, data['hci']); + this$.orbits.initOrbiter(target.slug, target.config, data['hci']); + return targetButton.removeClass('loading'); }, function(error){ return console.error('Failed to load CSV data.', error); }); diff --git a/web/static/js/swapp.ls b/web/static/js/swapp.ls index 5abf4b5..7df4ce2 100644 --- a/web/static/js/swapp.ls +++ b/web/static/js/swapp.ls @@ -73,11 +73,14 @@ https://gitlab.irap.omp.eu/CDPP/SPACEWEATHERONLINE console.info "Setting time interval from #{started_at} to #{stopped_at}…" active_targets.forEach((target) ~> console.info "Loading CSV data of #{target.name}…" + targetButton = $(".orbiters_filters .target.#{target.slug}") + targetButton.addClass('loading') @loadData(target.slug, started_at, stopped_at).then( (data) ~> console.info "Loaded CSV data of #{target.name}." @createTimeSeries(target, data) @orbits.initOrbiter(target.slug, target.config, data['hci']) + targetButton.removeClass('loading') , (error) -> console.error('Failed to load CSV data.', error) ) diff --git a/web/view/home.html.jinja2 b/web/view/home.html.jinja2 index 87e66f3..fba8f9f 100755 --- a/web/view/home.html.jinja2 +++ b/web/view/home.html.jinja2 @@ -9,7 +9,7 @@ src="{{ static('img/target/'~target.slug~'_128.png') }}" title="{{ target.title }}" alt="{{ target.name }}" - class="target {{ 'locked' if target.locked else 'active' }}" + class="target {{ target.slug }} {{ 'locked' if target.locked else 'active' }}" data-target-slug="{{ target.slug }}" > {%- endmacro %} @@ -150,6 +150,28 @@ .orbiters_filters .target.locked { cursor: not-allowed; } + .orbiters_filters .target.loading { +{# margin: 20px;#} +{# width: 100px;#} +{# height: 100px;#} +{# background: #f00;#} + -webkit-animation-name: spin; + -webkit-animation-duration: 4000ms; + -webkit-animation-iteration-count: infinite; + -webkit-animation-timing-function: linear; + -moz-animation-name: spin; + -moz-animation-duration: 4000ms; + -moz-animation-iteration-count: infinite; + -moz-animation-timing-function: linear; + -ms-animation-name: spin; + -ms-animation-duration: 4000ms; + -ms-animation-iteration-count: infinite; + -ms-animation-timing-function: linear; + animation-name: spin; + animation-duration: 4000ms; + animation-iteration-count: infinite; + animation-timing-function: linear; + } #orbits { {# background-image: url('{{ static('img/orbitals_background.png') }}');#} -- libgit2 0.21.2