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