gama.io/UnPS-Short
1
0
Fork 0
mirror of https://github.com/gamaio/UnPS-Short.git synced 2024-11-13 04:37:26 +00:00
Code Issues Projects Releases Wiki Activity

Add a loading animation to run when the form gets submitted

Browse Source 
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

68
assets/css/elements.css
View File

@ -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; }
}

5
index.php
View File

@ -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');