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)
This commit is contained in:
Arctic Code 2014-02-13 12:51:01 -06:00
parent 53066fac04
commit 0f0fde578f
2 changed files with 72 additions and 1 deletions

View File

@ -305,4 +305,70 @@ h2 {
background: url(http://placehold.it/570x80.png); background: url(http://placehold.it/570x80.png);
border-radius: 5px; border-radius: 5px;
max-width: 570px; 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; }
}

View File

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