gama.io/lobli
1
0
Fork 0
mirror of https://github.com/gamaio/lobli.git synced 2025-01-08 17:52:50 +00:00
Code Issues Projects Releases Wiki Activity

Modify #message and add loading animation

Browse Source 
Slide in and fade loading text for the AJAX loader on the 3 main pages
This commit is contained in:
alopexc0de 2014-06-22 21:15:02 -04:00
parent 8edc7c8296
commit 1bb170d04e
1 changed files with 98 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

99
Website/Include/CSS/style.css
View File

@ -96,6 +96,13 @@ hr {
} }
#message{ #message{
float: center;
text-align: center;
}
#message .alert{
float: left;
text-align: left;
width:515px; width:515px;
font-size: 15px; font-size: 15px;
font-weight: 550; font-weight: 550;
@ -162,4 +169,94 @@ hr {
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
text-align: center; text-align: center;
} }
#theLoader{ display: none; }
@-webkit-keyframes title {
0% {
opacity: 0;
right: 130px;
}
48% {
opacity: 0;
right: 130px;
}
52% {
opacity: 1;
right: 30px;
}
70% {
opacity: 1;
right: 30px;
}
100% {
opacity: 0;
right: 30px;
}
}
@-moz-keyframes title {
0% {
opacity: 0;
right: 130px;
}
48% {
opacity: 0;
right: 130px;
}
52% {
opacity: 1;
right: 30px;
}
70% {
opacity: 1;
right: 30px;
}
100% {
opacity: 0;
right: 30px;
}
}
@-webkit-keyframes fade {
0% { opacity: 1; }
100% { opacity: 0; }
}
@-moz-keyframes fade {
0% { opacity: 1; }
100% { opacity: 0; }
}
.wrap {
font-family: sans-serif, arial;
color: #eaf7ff;
position: relative;
left: 45%;
margin-left: auto;
margin-top: auto;
}
.loading {
position: relative;
text-align: center;
text-shadow: 0 0 6px #bce4ff;
height: 20px;
width: 150px;
}
.loading span {
display: block;
text-transform: uppercase;
position: absolute;
right: 30px;
height: 20px;
width: 200px;
line-height: 20px;
}
.loading span.title {
-moz-animation: title 3.4s linear infinite;
-webkit-animation: title 3.4s linear infinite;
animation: title 3.4s linear infinite;
}
.loading span.text {
-moz-animation: title 3.4s linear 1.7s infinite;
-webkit-animation: title 3.4s linear 1.7s infinite;
animation: title 3.4s linear 1.7s infinite;
opacity: 0;
}