Showing spinner while waiting.

app/scripts/main.js

@@ -5,6 +5,11 @@ console.log('\'Allo \'Allo!');
 $(function() {
     $('form').on('submit', function() {
         event.preventDefault();
+
+	// Display a spinner
+	$('.interest').html('<div id="floatingCirclesG"><div class="f_circleG" id="frotateG_01"></div><div class="f_circleG" id="frotateG_02"></div><div class="f_circleG" id="frotateG_03"></div><div class="f_circleG" id="frotateG_04"></div><div class="f_circleG" id="frotateG_05"></div><div class="f_circleG" id="frotateG_06"></div><div class="f_circleG" id="frotateG_07"></div><div class="f_circleG" id="frotateG_08"></div></div>');
+
+	// Save and load
         $.post(
             'http://alumni.studentersamfundet.no/async.php',
             {

app/styles/_spinner.scss

@@ -0,0 +1,178 @@
+#floatingCirclesG {
+    position:relative;
+    width:128px;
+    height:128px;
+    margin:auto;
+    -moz-transform:scale(0.6);
+    -webkit-transform:scale(0.6);
+    -ms-transform:scale(0.6);
+    -o-transform:scale(0.6);
+    transform:scale(0.6);
+}
+
+.f_circleG {
+    position:absolute;
+    background-color:#FFFFFF;
+    height:23px;
+    width:23px;
+    -moz-border-radius:12px;
+    -moz-animation-name:f_fadeG;
+    -moz-animation-duration:1.04s;
+    -moz-animation-iteration-count:infinite;
+    -moz-animation-direction:linear;
+    -webkit-border-radius:12px;
+    -webkit-animation-name:f_fadeG;
+    -webkit-animation-duration:1.04s;
+    -webkit-animation-iteration-count:infinite;
+    -webkit-animation-direction:linear;
+    -ms-border-radius:12px;
+    -ms-animation-name:f_fadeG;
+    -ms-animation-duration:1.04s;
+    -ms-animation-iteration-count:infinite;
+    -ms-animation-direction:linear;
+    -o-border-radius:12px;
+    -o-animation-name:f_fadeG;
+    -o-animation-duration:1.04s;
+    -o-animation-iteration-count:infinite;
+    -o-animation-direction:linear;
+    border-radius:12px;
+    animation-name:f_fadeG;
+    animation-duration:1.04s;
+    animation-iteration-count:infinite;
+    animation-direction:linear;
+}
+
+#frotateG_01 {
+    left:0;
+    top:52px;
+    -moz-animation-delay:0.39s;
+    -webkit-animation-delay:0.39s;
+    -ms-animation-delay:0.39s;
+    -o-animation-delay:0.39s;
+    animation-delay:0.39s;
+}
+
+#frotateG_02 {
+    left:15px;
+    top:15px;
+    -moz-animation-delay:0.52s;
+    -webkit-animation-delay:0.52s;
+    -ms-animation-delay:0.52s;
+    -o-animation-delay:0.52s;
+    animation-delay:0.52s;
+}
+
+#frotateG_03 {
+    left:52px;
+    top:0;
+    -moz-animation-delay:0.65s;
+    -webkit-animation-delay:0.65s;
+    -ms-animation-delay:0.65s;
+    -o-animation-delay:0.65s;
+    animation-delay:0.65s;
+}
+
+#frotateG_04 {
+    right:15px;
+    top:15px;
+    -moz-animation-delay:0.78s;
+    -webkit-animation-delay:0.78s;
+    -ms-animation-delay:0.78s;
+    -o-animation-delay:0.78s;
+    animation-delay:0.78s;
+}
+
+#frotateG_05 {
+    right:0;
+    top:52px;
+    -moz-animation-delay:0.91s;
+    -webkit-animation-delay:0.91s;
+    -ms-animation-delay:0.91s;
+    -o-animation-delay:0.91s;
+    animation-delay:0.91s;
+}
+
+#frotateG_06 {
+    right:15px;
+    bottom:15px;
+    -moz-animation-delay:1.04s;
+    -webkit-animation-delay:1.04s;
+    -ms-animation-delay:1.04s;
+    -o-animation-delay:1.04s;
+    animation-delay:1.04s;
+}
+
+#frotateG_07 {
+    left:52px;
+    bottom:0;
+    -moz-animation-delay:1.17s;
+    -webkit-animation-delay:1.17s;
+    -ms-animation-delay:1.17s;
+    -o-animation-delay:1.17s;
+    animation-delay:1.17s;
+}
+
+#frotateG_08 {
+    left:15px;
+    bottom:15px;
+    -moz-animation-delay:1.3s;
+    -webkit-animation-delay:1.3s;
+    -ms-animation-delay:1.3s;
+    -o-animation-delay:1.3s;
+    animation-delay:1.3s;
+}
+
+@-moz-keyframes f_fadeG {
+    0% {
+	background-color:#000000;
+    }
+
+    100% {
+	background-color:#FFFFFF;
+    }
+
+}
+
+@-webkit-keyframes f_fadeG {
+    0%{
+	background-color:#000000;
+    }
+
+    100% {
+	background-color:#FFFFFF;
+    }
+
+}
+
+@-ms-keyframes f_fadeG {
+    0% {
+	background-color:#000000;
+    }
+
+    100% {
+	background-color:#FFFFFF;
+    }
+
+}
+
+@-o-keyframes f_fadeG {
+    0% {
+	background-color:#000000;
+    }
+
+    100% {
+	background-color:#FFFFFF;
+    }
+
+}
+
+@keyframes f_fadeG {
+    0% {
+	background-color:#000000;
+    }
+
+    100% {
+	background-color:#FFFFFF;
+    }
+
+}

app/styles/main.scss

@@ -3,7 +3,8 @@
 
 @import
     "foundation-settings",
-    "foundation";
+    "foundation",
+    "spinner";
 
 body {
     background-color: #000;