spinners-on-search

css/search.css

@@ -0,0 +1,10 @@
+.search-loader {
+    border: 10px solid #f3f3f3;
+    border-radius: 50%;
+    border-top: 10px solid #C41C22;
+    width: 60px;
+    height: 60px;
+    -webkit-animation: spin 2s linear infinite;
+    animation: spin 2s linear infinite;
+    margin: auto;
+}

js/search.js

@@ -1,5 +1,10 @@
 var Parole = "";
 
+let mmoQueries = 0;
+let infQueries = 0;
+let perQueries = 0;
+let lgQueries = 0;
+
 $(document).ready(function () {
 	//#######################################
 
@@ -28,7 +33,14 @@ $(document).ready(function () {
 		Parole = testo;
 		
 		//questo era il contenuto di results_retrieveData()
-		$("#loader").css("display", "block");
+        mmoQueries = 0;
+        infQueries = 0;
+        perQueries = 0;
+        lgQueries = 0;
+		$("#mmoLoader").css("display", "block");
+		$("#infLoader").css("display", "block");
+		$("#perLoader").css("display", "block");
+		$("#lgLoader").css("display", "block");
 		$('#wb_Image1').text("");
 		$('.results').css("display", "none");
 
@@ -185,10 +197,14 @@ function rewrite_graph(graph) {
 
 function MMO_handle_json(json) {
 
-	console.log(json); 
+//	console.log(json);
+
+    mmoQueries = mmoQueries+1;
+    if(mmoQueries==3){
+        $('#mmoLoader').css("display", "none");
+    }
 
 	$('#wb_Shape1').text("");
-	$('#loader').css("display", "none");
 	$(".results").css("display", "block");
 
 	var n_mmo = $('#n_mmo').text();
@@ -259,7 +275,11 @@ function MMO_handle_json(json) {
 
 function InfObj_handle_json(json) {
 
-	console.log(json); 
+//	console.log(json); 
+    infQueries = infQueries+1;
+    if(infQueries==3){
+        $('#infLoader').css("display", "none");
+    }
 
 	var n_io = $('#n_io').text();
 	var b = parseInt(n_io);
@@ -378,9 +398,14 @@ function InfObj_handle_json(json) {
 
 function Person_handle_json(json) {
 
-	console.log(json); 
+//	console.log(json); 
 
-	var n_ps = $('#n_ps').text();
+    perQueries = perQueries+1;
+    if(perQueries==3){
+        $('#perLoader').css("display", "none");
+    }
+
+    var n_ps = $('#n_ps').text();
 	var b = parseInt(n_ps);
 	
 	var i = 0;
@@ -423,9 +448,14 @@ function Person_handle_json(json) {
 
 function Place_handle_json(json) {
 
-	console.log(json); 
+//	console.log(json);
+
+    lgQueries = lgQueries+1;
+    if(lgQueries==1){
+        $('#lgLoader').css("display", "none");
+    }
 
-	var n_pl = $('#n_pl').text();
+    var n_pl = $('#n_pl').text();
 	var b = parseInt(n_pl);
 	
 	var i = 0;
@@ -605,27 +635,23 @@ function doJsonQuery(query) {
 
 //funzione che prende il risultato della chiamata ajax e fa tutto quello che serve dopo
 function manageMMO(result){
-	console.log(result);
-	MMO_handle_json(result);
-	
+//	console.log(result);
+    MMO_handle_json(result);
 }
 
 function manageINF(result){
-	console.log(result);
-	InfObj_handle_json(result);
-	
+//	console.log(result);
+	InfObj_handle_json(result);	
 }
 
 function managePER(result){
-	console.log(result);
+//	console.log(result);
 	Person_handle_json(result);
-	
 }
 
 function manageLG(result){
-	console.log(result);
+//	console.log(result);
 	Place_handle_json(result);
-	
 }
 
 

ricerca.html

@@ -20,6 +20,7 @@
 
 	<link href="css/landing-page.css" rel="stylesheet">
 	<link href="css/styles.min.css" rel="stylesheet">
+	<link href="css/search.css" rel="stylesheet">
 
 	<script src="js/search.js"></script>
 </head>
@@ -55,11 +56,7 @@
 							<a class="nav-link" href="standard.html">Standard</a>
 						</li>
 						<li class="nav-item dropdown">
-							<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Sparql</a>
-							<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
-								<a class="dropdown-item" href="http://dev.restore.ovi.cnr.it:8890/sparql/">Endpoint Sparql</a>
-								<a class="dropdown-item" href="sparql.html">Query</a>
-							</div>
+							<a class="mal
 						</li>
 						<!--<li class="nav-item">
 							<a class="nav-link" href="download.html">Download</a>
@@ -155,10 +152,10 @@
 						</div>
 					</div>
 					<div class="row res_list">
-						<div class="container-fluid" id="Man-Made_Object">
-							
+                        <div class="container-fluid" id="Man-Made_Object">
 						</div>
 					</div>
+                    <div id="mmoLoader" class="search-loader" style="display:block;"></div>
 				</div>
 
 				<!-- Oggetti informativi -->
@@ -176,6 +173,7 @@
 						<div class="col" id="Information_Object">
 						</div>
 					</div>
+                    <div id="infLoader" class="search-loader" style="display:block;"></div>
 				</div>
 
 				<!-- Persone -->
@@ -193,6 +191,7 @@
 						<div class="col" id="Person">
 						</div>
 					</div>
+                    <div id="perLoader" class="search-loader" style="display:block;"></div>
 				</div>
 
 				<!-- Luoghi -->
@@ -210,6 +209,7 @@
 						<div class="col" id="Place">
 						</div>
 					</div>
+                    <div id="lgLoader" class="search-loader" style="display:block;"></div>
 				</div>
 
 				<div id="wb_Text1" style="position:fixed;">
@@ -218,7 +218,6 @@
 
 				<table id="wb_Shape1" class="table table-hover"></table>
 			</div>
-			<div id="loader" class="loader" style="display:none;"></div>
 		</section>
 	</main>