Add a loading animation to run when the form gets submitted

This is to show that the page is actually doing something
if the return message doesn't get shown right away for whatever
reason (slow connection, overloaded server, memory leaks, etc)

assets/css/elements.css

@@ -305,4 +305,70 @@ h2 {
   background: url(http://placehold.it/570x80.png);
   border-radius: 5px;
   max-width: 570px;
-}
+}
+
+#theLoader{ display: none; }
+
+#loading{
+  position: relative;
+  left: 53.6%;
+  top: 15%;
+  margin: -22px 0 0 -15px;
+  color: #aaa;
+}
+
+#ajaxloader{ /* Modified from http://unps.us/?ygi1h9 */
+  position: relative;
+  width: 30px;
+  height: 30px;
+  left: 50%;
+  top: 15%;
+  margin: 0 0 0 -15px;
+  border: 8px solid #fff;
+  border-right-color: transparent;
+  border-top: 0 none;
+  border-bottom: 0 none;
+  border-left: 1 none;
+  border-radius: 50%;
+  box-shadow: 0 0 25px 2px #eee;
+  -webkit-animation: spin 1s linear infinite;
+  -moz-animation: spin 1s linear infinite;
+  -ms-animation: spin 1s linear infinite;
+  -o-animation: spin 1s linear infinite;
+  animation: spin 1s linear infinite;
+}
+
+@-webkit-keyframes spin
+{
+  from { -webkit-transform: rotate(0deg); opacity: 0.4; }
+  50%  { -webkit-transform: rotate(180deg); opacity: 1; }
+  to   { -webkit-transform: rotate(360deg); opacity: 0.4; }
+}
+
+@-moz-keyframes spin
+{
+  from { -moz-transform: rotate(0deg); opacity: 0.4; }
+  50%  { -moz-transform: rotate(180deg); opacity: 1; }
+  to   { -moz-transform: rotate(360deg); opacity: 0.4; }
+}
+
+@-ms-keyframes spin
+{
+  from { -ms-transform: rotate(0deg); opacity: 0.4; }
+  50%  { -ms-transform: rotate(180deg); opacity: 1; }
+  to   { -ms-transform: rotate(360deg); opacity: 0.4; }
+}
+
+@-o-keyframes spin
+{
+  from { -o-transform: rotate(0deg); opacity: 0.4; }
+  50%  { -o-transform: rotate(180deg); opacity: 1; }
+  to   { -o-transform: rotate(360deg); opacity: 0.4; }
+}
+
+@keyframes spin
+{
+  from { transform: rotate(0deg); opacity: 0.2; }
+  50%  { transform: rotate(180deg); opacity: 1; }
+  to   { transform: rotate(360deg); opacity: 0.2; }
+}

index.php

@@ -122,6 +122,9 @@
         </div>
 
         
+        <div id="theLoader">
+          <div id="ajaxloader"></div><p id="loading">Loading...</a>
+        </div>
       </div>
     </div>
 
@@ -147,10 +150,12 @@
     <script type="text/javascript" language="JavaScript">
       // This is our AJAX - Thank you Wizzy <3
       $("#form-shorten").submit(function(event){
+        $("#theLoader").fadeIn("Fast");
         event.preventDefault();
         event.stopPropagation();
         $.post("process.php?token=<?php echo $token; ?>", $(this).serialize(), function(data){
           $("#message").hide().html(data+'<br /><div class="gab"></div>').fadeIn("fast");
+          $("#theLoader").hide();
           if($('#error').length){
             $('#short-button').removeClass('btn-primary');
             $('#short-button').removeClass('btn-success');