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;