diff --git a/app/scripts/main.js b/app/scripts/main.js
index 60363b5..1a0231b 100644
--- a/app/scripts/main.js
+++ b/app/scripts/main.js
@@ -5,6 +5,11 @@ console.log('\'Allo \'Allo!');
$(function() {
$('form').on('submit', function() {
event.preventDefault();
+
+ // Display a spinner
+ $('.interest').html('
');
+
+ // Save and load
$.post(
'http://alumni.studentersamfundet.no/async.php',
{
diff --git a/app/styles/_spinner.scss b/app/styles/_spinner.scss
new file mode 100644
index 0000000..beba0c2
--- /dev/null
+++ b/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;
+ }
+
+}
diff --git a/app/styles/main.scss b/app/styles/main.scss
index 74c97e8..6501def 100644
--- a/app/styles/main.scss
+++ b/app/styles/main.scss
@@ -3,7 +3,8 @@
@import
"foundation-settings",
- "foundation";
+ "foundation",
+ "spinner";
body {
background-color: #000;