Replacing 'loading.gif' when starting fancy mode.spinner

2 files changed, 49 insertions, 0 deletions

diff --git a/js/functions.js b/js/functions.js
index 6b0dcf4..d19ba11 100644
--- a/js/functions.js
+++ b/js/functions.js
@@ -11,9 +11,15 @@ $('.modal').draggable({
 	handle: ".modal-header"
 });
 function loadFancy(){
+/*
 	document.getElementById("loader").style.backgroundImage="url('" +cdn + "/img/loading.gif')";
 	document.getElementById("loader").style.visibility="visible";
 	document.getElementById("loader-bg").style.visibility="visible";
+*/
+
+	$(".spinner").style.visibility="visible";
+	document.getElementById("loader").style.visibility="visible";
+	document.getElementById("loader-bg").style.visibility="visible";
 
 	var eyecancer = document.createElement("script");
 	eyecancer.type = "text/javascript";
diff --git a/static/style.css b/static/style.css
index f6319cc..22aedb3 100644
--- a/static/style.css
+++ b/static/style.css
@@ -125,3 +125,46 @@ a {
 .nav-tabs{
 	margin: 20px;
 }
+
+    .spinner {
+      width:30px;
+      height:30px;
+      margin:100px auto;
+	visibility: hidden;
+    }
+
+    .cube {
+      width:33%;
+      height:33%;
+      background:#333;
+      float:left;
+      -webkit-animation: scaleDelay 1.3s infinite ease-in-out;
+      animation: scaleDelay 1.3s infinite ease-in-out;
+    }
+
+    /* 
+     * Spinner positions
+     * 1 2 3 
+     * 4 5 6
+     * 7 8 9
+     */
+
+    .spinner .cube:nth-child(1) { -webkit-animation-delay: 0.2s; animation-delay: 0.2s  }
+    .spinner .cube:nth-child(2) { -webkit-animation-delay: 0.3s; animation-delay: 0.3s  }
+    .spinner .cube:nth-child(3) { -webkit-animation-delay: 0.4s; animation-delay: 0.4s  }
+    .spinner .cube:nth-child(4) { -webkit-animation-delay: 0.1s; animation-delay: 0.1s  }
+    .spinner .cube:nth-child(5) { -webkit-animation-delay: 0.2s; animation-delay: 0.2s  }
+    .spinner .cube:nth-child(6) { -webkit-animation-delay: 0.3s; animation-delay: 0.3s  }
+    .spinner .cube:nth-child(7) { -webkit-animation-delay: 0.0s; animation-delay: 0.0s  }
+    .spinner .cube:nth-child(8) { -webkit-animation-delay: 0.1s; animation-delay: 0.1s  }
+    .spinner .cube:nth-child(9) { -webkit-animation-delay: 0.2s; animation-delay: 0.2s  }
+        
+    @-webkit-keyframes scaleDelay {
+      0%, 70%, 100% { -webkit-transform:scale3D(1.0, 1.0, 1.0) }
+      35%           { -webkit-transform:scale3D(0.0, 0.0, 1.0) }
+    }
+        
+    @keyframes scaleDelay {
+      0%, 70%, 100% { -webkit-transform:scale3D(1.0, 1.0, 1.0); transform:scale3D(1.0, 1.0, 1.0) }
+      35%           { -webkit-transform:scale3D(1.0, 1.0, 1.0); transform:scale3D(0.0, 0.0, 1.0) }
+    }