Added Loading screen.
This commit is contained in:
sirsandmann
parent
1a9c796c12
commit
34b9d69a46
110
css/main.css
110
css/main.css
|
|
@ -109,3 +109,113 @@ body {
|
|||
width: 1%;
|
||||
height: 1%;
|
||||
}
|
||||
|
||||
#overlay {
|
||||
position: fixed;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba(0,0,0,0.7);
|
||||
z-index: 2;
|
||||
cursor: pointer;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
#loading-header{
|
||||
position: fixed;
|
||||
top: 43%;
|
||||
left: 49%;
|
||||
margin: -14px 0 0 -42px;
|
||||
padding: 10px;
|
||||
color: black;
|
||||
z-index: 6;
|
||||
}
|
||||
|
||||
.loading {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin: -14px 0 0 -42px;
|
||||
padding: 10px;
|
||||
background: rgba(20, 20, 20, 0.9);
|
||||
|
||||
-webkit-border-radius: 5px;
|
||||
-moz-border-radius: 5px;
|
||||
border-radius: 5px;
|
||||
|
||||
-webkit-box-shadow: inset 0 0 5px #000, 0 1px 1px rgba(255, 255, 255, 0.1);
|
||||
-moz-box-shadow: inset 0 0 5px #000, 0 1px 1px rgba(255, 255, 255, 0.1);
|
||||
-ms-box-shadow: inset 0 0 5px #000, 0 1px 1px rgba(255, 255, 255, 0.1);
|
||||
-o-box-shadow: inset 0 0 5px #000, 0 1px 1px rgba(255, 255, 255, 0.1);
|
||||
box-shadow: inset 0 0 5px #000, 0 1px 1px rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.loading-dot {
|
||||
float: left;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
margin: 0 4px;
|
||||
background: white;
|
||||
|
||||
-webkit-border-radius: 50%;
|
||||
-moz-border-radius: 50%;
|
||||
border-radius: 50%;
|
||||
|
||||
opacity: 0;
|
||||
|
||||
-webkit-box-shadow: 0 0 2px black;
|
||||
-moz-box-shadow: 0 0 2px black;
|
||||
-ms-box-shadow: 0 0 2px black;
|
||||
-o-box-shadow: 0 0 2px black;
|
||||
box-shadow: 0 0 2px black;
|
||||
|
||||
-webkit-animation: loadingFade 1s infinite;
|
||||
-moz-animation: loadingFade 1s infinite;
|
||||
animation: loadingFade 1s infinite;
|
||||
}
|
||||
|
||||
.loading-dot:nth-child(1) {
|
||||
-webkit-animation-delay: 0s;
|
||||
-moz-animation-delay: 0s;
|
||||
animation-delay: 0s;
|
||||
}
|
||||
|
||||
.loading-dot:nth-child(2) {
|
||||
-webkit-animation-delay: 0.1s;
|
||||
-moz-animation-delay: 0.1s;
|
||||
animation-delay: 0.1s;
|
||||
}
|
||||
|
||||
.loading-dot:nth-child(3) {
|
||||
-webkit-animation-delay: 0.2s;
|
||||
-moz-animation-delay: 0.2s;
|
||||
animation-delay: 0.2s;
|
||||
}
|
||||
|
||||
.loading-dot:nth-child(4) {
|
||||
-webkit-animation-delay: 0.3s;
|
||||
-moz-animation-delay: 0.3s;
|
||||
animation-delay: 0.3s;
|
||||
}
|
||||
|
||||
@-webkit-keyframes loadingFade {
|
||||
0% { opacity: 0; }
|
||||
50% { opacity: 0.8; }
|
||||
100% { opacity: 0; }
|
||||
}
|
||||
|
||||
@-moz-keyframes loadingFade {
|
||||
0% { opacity: 0; }
|
||||
50% { opacity: 0.8; }
|
||||
100% { opacity: 0; }
|
||||
}
|
||||
|
||||
@keyframes loadingFade {
|
||||
0% { opacity: 0; }
|
||||
50% { opacity: 0.8; }
|
||||
100% { opacity: 0; }
|
||||
}
|
||||
|
|
|
|||
15
index.html
15
index.html
|
|
@ -13,6 +13,7 @@
|
|||
<link rel="stylesheet" type="text/css" href="css/main.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="wrap">
|
||||
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
|
||||
<a class="navbar-brand" href="#">F1Vis</a>
|
||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
|
||||
|
|
@ -104,9 +105,20 @@
|
|||
|
||||
</main><!-- /.container -->
|
||||
|
||||
|
||||
|
||||
<div id="overlay">
|
||||
<div class="loading">
|
||||
<div class="loading-dot"></div>
|
||||
<div class="loading-dot"></div>
|
||||
<div class="loading-dot"></div>
|
||||
<div class="loading-dot"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Other utility infrastructure -->
|
||||
<!--
|
||||
<div id="loading-dialog" class="modal fade" data-backdrop="static" data-keyboard="false" tabindex="-1" role="dialog" aria-hidden="true" style="padding-top:15%; overflow-y:visible;">
|
||||
<div class="modal-dialog modal-m">
|
||||
<!--<div class="modal-dialog modal-m">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">Wir bereiten gerade alles vor ...<br>Bitte haben Sie einen Augenblick Geduld.</div>
|
||||
<div class="modal-body">
|
||||
|
|
@ -116,6 +128,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>-->
|
||||
</div>
|
||||
|
||||
<!-- Placed at the end of the document so the pages load faster -->
|
||||
|
|
|
|||
|
|
@ -280,8 +280,6 @@ var preprocessor = {
|
|||
|
||||
// Starts the fetch+preprocess step, calls back given function with results.
|
||||
load: function(callback) {
|
||||
// Show loading dialog
|
||||
loadingDialog.show(13);
|
||||
// Create a queue, add all the fetch&process functions and await their results
|
||||
d3.queue()
|
||||
.defer(preprocessor.fetchCircuits)
|
||||
|
|
|
|||
30
js/util.js
30
js/util.js
|
|
@ -22,35 +22,19 @@ function germanDateString(inputDate) {
|
|||
|
||||
/* Define global structure for the loading dialog */
|
||||
var loadingDialog = {
|
||||
id: "#loading-dialog",
|
||||
progressItems: 1,
|
||||
progressItemsDone: 0,
|
||||
// Initialize+Show the loading dialog with a number of items to progress
|
||||
show: function(progressItems = 1) {
|
||||
console.log("show");
|
||||
this.progressItems = progressItems;
|
||||
this.progressItemsDone = 0;
|
||||
this._updateProgressBar();
|
||||
//$(this.id).modal('show');
|
||||
},
|
||||
|
||||
// Function to signal that another item was progressed
|
||||
itemFinished: function() {
|
||||
|
||||
this.progressItemsDone++;
|
||||
this._updateProgressBar();
|
||||
},
|
||||
// Hide the dialog
|
||||
hide: function() {
|
||||
console.log("hide");
|
||||
//$(this.id).modal('hide');
|
||||
},
|
||||
// Private function to update the progress bar shown
|
||||
_updateProgressBar: function() {
|
||||
var percentage = (this.progressItemsDone / this.progressItems) * 100;
|
||||
if(percentage < 0 || isNaN(percentage)) percentage = 0;
|
||||
if(percentage > 100) percentage = 100;
|
||||
$(this.id + " .progress-bar").attr("style", "width: " + percentage + "%;");
|
||||
},
|
||||
$(document).ready(function($) {
|
||||
$("#overlay").fadeOut(350, "linear", function(){
|
||||
$("#overlay").css("display", "none");
|
||||
});
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// transforms the raceData to a format, with which lineDataDefinition can work
|
||||
|
|
|
|||
Loading…
Reference in New Issue