From 0f0fde578fed1c776a3cb20aa012875fd8fb570c Mon Sep 17 00:00:00 2001
From: Arctic Code <tehfoxy.c0de@gmail.com>
Date: Thu, 13 Feb 2014 12:51:01 -0600
Subject: [PATCH] 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 | 68 ++++++++++++++++++++++++++++++++++++++++-
 index.php               |  5 +++
 2 files changed, 72 insertions(+), 1 deletion(-)

diff --git a/assets/css/elements.css b/assets/css/elements.css
index 0e8bb61..be08ec0 100644
--- a/assets/css/elements.css
+++ b/assets/css/elements.css
@@ -305,4 +305,70 @@ h2 {
   background: url(http://placehold.it/570x80.png);
   border-radius: 5px;
   max-width: 570px;
-}
\ No newline at end of file
+}
+
+#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; }
+}
diff --git a/index.php b/index.php
index 50fffa8..42d4ead 100644
--- a/index.php
+++ b/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');