<html>
<head>
<style>
body,html {
width:100%;
height:100%;
background:#4c7a9e ;
}
@-webkit-keyframes color{
0%{color:#fff;}
50%{color:transparent;}
100%{color:#fff;}
}
@-webkit-keyframes border-c{
0%{border-color:transparent;border-top-color:#fff;}
25%{border-color:transparent;border-right-color:#fff;}
50%{border-color:transparent;border-bottom-color:#fff;}
75%{border-color:transparent;border-left-color:#fff;}
100%{border-color:transparent;border-top-color:#fff;}
}
#loader{
font-family:"helvetica neue";
text-align:center;
width:100px;
height:100px;
line-height:100px;
border:1px solid transparent;
-webkit-border-radius:100px;
-moz-border-radius:100px;
border-radius:100px;
display:block;
margin:120px auto;
padding:10px;
color:#fff;
font-weight:100;
-webkit-animation:border-c 1.25s linear 0 infinite;
-moz-animation:border-c 1.25s linear 0 infinite;
-ms-animation:border-c 1.25s linear 0 infinite;
-o-animation:border-c 1.25s linear 0 infinite;
animation:border-c 1.25s linear 0 infinite;
}
#loader span{
-webkit-animation:color 1.5s linear infinite;
-moz-animation:color 1.5s linear infinite;
-ms-animation:color 1.5s linear infinite;
-o-animation:color 1.5s linear infinite;
animation:color 1.5s linear infinite;
}
#loader span:nth-child(1){
-webkit-animation-delay:0s;
-moz-animation-delay:0s;
-ms-animation-delay:0s;
-o-animation-delay:0s;
animation-delay:0s;
}
#loader span:nth-child(2){
-webkit-animation-delay:.25s;
-moz-animation-delay:.25s;
-ms-animation-delay:.25s;
-o-animation-delay:.25s;
animation-delay:.25s;
}
#loader span:nth-child(3){
-webkit-animation-delay:.45s;
-moz-animation-delay:.45s;
-ms-animation-delay:.45s;
-o-animation-delay:.45s;
animation-delay:.45s;
}
#loader span:nth-child(4){
-webkit-animation-delay:.55s;
-moz-animation-delay:.55s;
-ms-animation-delay:.55s;
-o-animation-delay:.55s;
animation-delay:.55s;
}
#loader span:nth-child(5){
-webkit-animation-delay:.65s;
-moz-animation-delay:.65s;
-ms-animation-delay:.65s;
-o-animation-delay:.65s;
animation-delay:.65s;
}
#loader span:nth-child(6){
-webkit-animation-delay:.75s;
-moz-animation-delay:.75s;
-ms-animation-delay:.75s;
-o-animation-delay:.75s;
animation-delay:.75s;
}
#loader span:nth-child(7){
-webkit-animation-delay:.85s;
-moz-animation-delay:.85s;
-ms-animation-delay:.85s;
-o-animation-delay:.85s;
animation-delay:.85s;
}
p{
text-align:center;
font-size:30px;
font-family:helvetica neue;
font-weight:100;
color:#fff;
}
a{
color:#7bf;
text-decoration:none;
}
</style>
</head>
<body>
<div id="loader">
<span>L</span>
<span>O</span>
<span>A</span>
<span>D</span>
<span>I</span>
<span>N</span>
<span>G</span>
</div>
</html>
0 comments:
Post a Comment