Mirrors
/
aredn
mirror of https://github.com/aredn/aredn.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

add loading spinner to signal page

This commit is contained in:
Trevor Paskett - K7FPV 2016-01-22 15:32:33 -07:00
parent 04c8de37a2
commit 602dc13d8a
2 changed files with 92 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
files/www/cgi-bin/signal
View File

@ -56,6 +56,7 @@ http_header();
html_header("$node $dmode signal strength", 0);
$header = <<EOF;
<link href="/loading.css" rel="stylesheet">
<script src="/js/jquery-2.1.4.min.js"></script>
<script src="/js/jquery.canvasjs.min.js"></script>
<script type="text/javascript">
@ -75,6 +76,17 @@ $header = <<EOF;
return vars;
}
function hide_spinner() {
\$('#content-loading-spinner').dequeue();
\$('#content-loading-spinner').hide();
\$('#content-overlay').dequeue();
\$('#content-overlay').hide();
}
\$(document).ajaxComplete(function() {
hide_spinner();
});
\$(document).ready(function () {
var MAXPOINTS=10;
var chart = new CanvasJS.Chart("chartContainer", {
@ -148,6 +160,15 @@ EOF
$page = <<EOF;
<body>
<div class="overlay" id="content-overlay"></div>
<div id="content-loading-spinner-wrapper">
<div id="content-loading-spinner">
<div class="spinner"></div>
<div class="loading-text">
Loading . . .
</div>
</div>
</div>
<center>
<div class="TopBanner">
<div class="LogoDiv"><img src="/AREDN.png" class="AREDNLogo"></img></div>

71
files/www/loading.css Normal file
View File

@ -0,0 +1,71 @@
/* Loading Spinner */
#content-overlay {
left: 0px;
}
.overlay {
z-index: 1000;
background-color: black;
-moz-opacity: 0.60;
opacity: 0.60;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=50);
width: 100%;
height: 100%;
position: absolute;
top: 0;
margin: 0;
padding: 0;
}
.loading-text {
margin:0px auto;
font-weight: bold;
color: #FFFFFF;
line-height: 4.5em;
}
.spinner {
margin:0px auto;
height: 120px;
width: 120px;
-webkit-animation: rotation .6s infinite linear;
-moz-animation: rotation .6s infinite linear;
-o-animation: rotation .6s infinite linear;
animation: rotation .6s infinite linear;
border-left:12px solid #FFFFFF;
border-right:12px solid #FFFFFF;
border-bottom:12px solid #FFFFFF;
border-top:12px solid rgb(190,30,44);
border-radius:100%;
}
#content-loading-spinner {
position: absolute;
z-index: 10000;
text-align: center;
top: 300px;
left: 47%;
display: block;
margin-left: auto;
margin-right: auto;
}
@-webkit-keyframes rotation {
from {-webkit-transform: rotate(0deg);}
to {-webkit-transform: rotate(359deg);}
}
@-moz-keyframes rotation {
from {-moz-transform: rotate(0deg);}
to {-moz-transform: rotate(359deg);}
}
@-o-keyframes rotation {
from {-o-transform: rotate(0deg);}
to {-o-transform: rotate(359deg);}
}
@keyframes rotation {
from {transform: rotate(0deg);}
to {transform: rotate(359deg);}
}