added loading bar for ajax call

_sass/_style.scss

@@ -159,13 +159,28 @@ a:hover {
 
 }
 option{
-  margin: 2px 0;
+  margin: 2px auto;
+  text-align: center;
 }
 .form-control:focus{
   border:0;
   box-shadow:none;
 }
 
+.hide{
+  display:none;
+}
+#loading{
+  background-image:url("../images/loader.gif");
+  background-size:cover;
+  position:fixed;
+  top:60%;
+  left:50%;
+  width:80px;
+  height:80px;
+  z-index:1030;
+}
+
 #map-view{
   width:100vw;
   height:400px;

index.html

@@ -14,7 +14,7 @@
           <option value="routes">routes</option>
         </select>
       </span>
-      <span class="h2"> BY </span>
+      <span style="margin-left:10px" class="h2"> BY </span>
       <span id="parameterMenu" class="btn-group dropdown h2">
         <select class="form-control" id="parameter">
           <option> </option>
@@ -30,8 +30,9 @@
     <p class="run">
       <button class="btn btn-med btn-default">RUN QUERY</button>
     </p>
+    <div id="loading" class="hide"></div>
     <div class="custom-popup" id="map-view"></div>
-   <div class="backgrid-container" id="results"></div>
+   <div class="backgrid-container white-text" id="results"></div>
 
   </script>
 

js/developer-playground.js

@@ -1,10 +1,11 @@
 $(document).ready(function () {
 	$(document).ajaxStart(function() {
-		// start spinner, add style here
-		console.log("Start spinner here");
+		 $("#loading").removeClass("hide");
+
 	})
 	$(document).ajaxComplete(function(event, request, settings) {
 		// stop spinner, add style here
+    $("#loading").addClass("hide");
 		console.log("Stop spinner here");
 	})
     DeveloperPlayground.startQueryBuilderView = new DeveloperPlayground.StartQueryBuilderView();