Commit 7587f742 authored by Porter Libby's avatar Porter Libby
Browse files

loading indicator

parent 4af9091b
......@@ -122,34 +122,58 @@ label
transition-duration: 1s;
}
.lds-hourglass {
.lds-ellipsis {
display: inline-block;
position: relative;
width: 64px;
height: 64px;
}
.lds-hourglass:after {
content: " ";
display: block;
.lds-ellipsis div {
position: absolute;
top: 27px;
width: 11px;
height: 11px;
border-radius: 50%;
width: 0;
height: 0;
margin: 6px;
box-sizing: border-box;
border: 26px solid #fff;
border-color: #fff transparent #fff transparent;
animation: lds-hourglass 1.2s infinite;
background: #000;
animation-timing-function: cubic-bezier(0, 1, 1, 0);
}
.lds-ellipsis div:nth-child(1) {
left: 6px;
animation: lds-ellipsis1 0.6s infinite;
}
.lds-ellipsis div:nth-child(2) {
left: 6px;
animation: lds-ellipsis2 0.6s infinite;
}
.lds-ellipsis div:nth-child(3) {
left: 26px;
animation: lds-ellipsis2 0.6s infinite;
}
.lds-ellipsis div:nth-child(4) {
left: 45px;
animation: lds-ellipsis3 0.6s infinite;
}
@keyframes lds-ellipsis1 {
0% {
transform: scale(0);
}
100% {
transform: scale(1);
}
}
@keyframes lds-hourglass {
@keyframes lds-ellipsis3 {
0% {
transform: rotate(0);
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
transform: scale(1);
}
50% {
transform: rotate(900deg);
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
100% {
transform: scale(0);
}
}
@keyframes lds-ellipsis2 {
0% {
transform: translate(0, 0);
}
100% {
transform: rotate(1800deg);
transform: translate(19px, 0);
}
}
\ No newline at end of file
......@@ -109,7 +109,7 @@ function setStreaming(){
// Gets
function getTrips(){
document.getElementById('data-prompt').innerHTML = "Pick a trip, site, sector, and spot."
document.getElementById('trips').innerHTML = "";
document.getElementById('trips').innerHTML = "<div class='lds-ellipsis'><div></div><div></div><div></div><div></div></div>";
document.getElementById('sites').innerHTML = "";
document.getElementById('sectors').innerHTML = "";
document.getElementById('spots').innerHTML = "";
......@@ -135,7 +135,7 @@ function getTrips(){
}
function getSites(trip_id){
document.getElementById('data-prompt').innerHTML = "Pick a site, sector, and spot."
document.getElementById('sites').innerHTML = "";
document.getElementById('sites').innerHTML = "<div class='lds-ellipsis'><div></div><div></div><div></div><div></div></div>";
document.getElementById('sectors').innerHTML = "";
document.getElementById('spots').innerHTML = "";
document.getElementById('streaming').innerHTML = "";
......@@ -165,7 +165,7 @@ function getSites(trip_id){
}
function getSectors(site_id){
document.getElementById('data-prompt').innerHTML = "Pick a sector and a spot."
document.getElementById('sectors').innerHTML = "";
document.getElementById('sectors').innerHTML = "<div class='lds-ellipsis'><div></div><div></div><div></div><div></div></div>";
document.getElementById('spots').innerHTML = "";
document.getElementById('streaming').innerHTML = "";
......@@ -194,7 +194,7 @@ function getSectors(site_id){
}
function getSpots(sector_id){
document.getElementById('data-prompt').innerHTML = "Pick a spot."
document.getElementById('spots').innerHTML = "";
document.getElementById('spots').innerHTML = "<div class='lds-ellipsis'><div></div><div></div><div></div><div></div></div>";
document.getElementById('streaming').innerHTML = "";
togglediv('#sectors-ls','sectors-button');
......@@ -245,7 +245,7 @@ function getReadings(spot_id){
}
function getStreamings(sector_id){
document.getElementById('data-prompt').innerHTML = "Pick a set of data to visualize";
document.getElementById('streaming').innerHTML = "";
document.getElementById('streaming').innerHTML = "<div class='lds-ellipsis'><div></div><div></div><div></div><div></div></div>";
togglediv('#sectors-ls','sectors-button');
......@@ -270,6 +270,7 @@ function getStreamings(sector_id){
// Renders
function renderTrips(tripnames, tripids){
var container = document.getElementById('trips');
container.innerHTML = '';
if (container.childElementCount == 0){ // dont override selections with navigation
container.innerHTML += "<div onclick='togglediv(" + '"#trips-ls","trips-button"' + ")' class='data-header'><h1>Trips <span id='trips-button'>-</span></h1></div>";
var trips_ls = document.createElement('div');
......
......@@ -84,17 +84,17 @@
<div class='data-catagory'>
<div class='data-header' style='padding-bottom:15px; background-color: #bbb'>
<input class="data-radio form-radio" onchange="setReading();" type="radio" name="data-type" id="readings"/>
<label for="readings"><strong>Readings from Fieldday</strong></label>
<label for="readings"><strong>Readings</strong></label>
<input class="data-radio form-radio" onchange="setStreaming();" type="radio" name="data-type" id="streamings"/>
<label for="streamings"><strong>Stream data from Platforms</strong></label>
<label for="streamings"><strong>Stream Data</strong></label>
</div>
</div>
<div class='data-catagory' id='trips'></div>
<div class='data-catagory' id='sites'></div>
<div class='data-catagory' id='sectors'></div>
<div class='data-catagory' id='spots'></div>
<div class='data-catagory' id='streaming'><div class="lds-hourglass"></div></div>
<div class='data-catagory' id='streaming'></div>
<div class='data-catagory' id='reading'></div>
<div id='data-prompt-box'>
<strong>
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment