<link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />
<style>
body {
background-image: url(http://i.imgur.com/ct8IVXk.jpg);
background-size: 100%;
background-origin: content;
background-repeat: no-repeat;
}
</style>
<div class="loading-spinner"></div>
<div class="go-rounder"></div>
<div class="go-rounder another"></div>
<div class="loader-text">
</div>
/*---------------------------------- *
- Loding Style with CSS3 animation transform (cross browser)
----------------------------------/
.cf-loader { position: fixed; margin: 0 auto; top: 78.5%; left: 45.8%; }
.loading-spinner { position: absolute; top: 0; width: 80px; height: 80px; border-radius: 50%; border: 15px solid #d1fdf1; -webkit-animation: rotation 3s infinite linear; -moz-animation: rotation 3s infinite linear; -o-animation: rotation 3s infinite linear; animation: rotation 3s infinite linear; -webkit-animation: rotation 3s infinite linear; -moz-animation: rotation 3s infinite linear; -o-animation: rotation 3s infinite linear; }
.loading-spinner:before { content: " "; display: block; position: absolute; left: -15px; top: -15px; height: 100%; width: 100%; border-top: 15px solid #35afc3; opacity: 0.8; border-left: 15px solid transparent; border-bottom: 15px solid transparent; border-right: 15px solid transparent; border-radius: 100%; }
@-webkit-keyframes rotation { from {-webkit-transform: rotate(0deg);} to {-webkit-transform: rotate(359deg);} } @-moz-keyframes rotation { from {-moz-transform: rotate(0deg);} to {-moz-transform: rotate(359deg);} } @-o-keyframes rotation { from {-o-transform: rotate(0deg);} to {-o-transform: rotate(359deg);} } @keyframes rotation { from {transform: rotate(0deg);} to {transform: rotate(359deg);} }
.go-rounder { position: absolute; top: -15px; left: -15px; width: 70px; height: 70px; border: 20px solid; border-radius: 100%; border-top-color: #35afc3 ; border-left-color: #7ffad8; border-bottom-color: #35afc3 ; border-right-color: #7ffad8; opacity: 0.2; animation: goor 5s infinite; -webkit-animation: goor 5s infinite; -moz-animation: goor 5s infinite; -o-animation: goor 5s infinite; }
@keyframes goor { 0% {transform: scale(1,1) rotate(0deg); opacity: 0.2;} 50% {transform: scale(4,4) rotate(360deg); opacity: 0;} } @-webkit-keyframes goor { 0% {-webkit-transform: scale(1,1) rotate(0deg); opacity: 0.2;} 50% {-webkit-transform: scale(4,4) rotate(360deg); opacity: 0;} } @-moz-keyframes goor { 0% {-moz-transform: scale(1,1) rotate(0deg); opacity: 0.2;} 50% {-moz-transform: scale(4,4) rotate(360deg); opacity: 0;} } @-o-keyframes goor { 0% {-o-transform: scale(1,1) rotate(0deg); opacity: 0.2;} 50% {-o-transform: scale(4,4) rotate(360deg); opacity: 0;} }
.another { opacity: 0.1; transform: rotate(90deg); -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -o-transform: rotate(90deg);
animation: gooraty 5s infinite;
-webkit-animation: gooraty 5s infinite;
-moz-animation: gooraty 5s infinite;
-o-animation: gooraty 5s infinite;
animation-delay: 1s;
-webkit-animation-delay: 1s;
-moz-animation-delay: 1s;
-o-animation-delay: 1s;
}
@keyframes gooraty { 0% {transform: scale(1,1) rotate(90deg); opacity: 0.1;} 50% {transform: scale(4,4) rotate(-360deg); opacity: 0;} } @-webkit-keyframes gooraty { 0% {-webkit-transform: scale(1,1) rotate(90deg); opacity: 0.1;} 50% {-webkit-transform: scale(4,4) rotate(-360deg); opacity: 0;} } @-moz-keyframes gooraty { 0% {-moz-transform: scale(1,1) rotate(90deg); opacity: 0.1;} 50% {-moz-transform: scale(4,4) rotate(-360deg); opacity: 0;} } @-o-keyframes gooraty { 0% {-o-transform: scale(1,1) rotate(90deg); opacity: 0.1;} 50% {-o-transform: scale(4,4) rotate(-360deg); opacity: 0;} }
.loader-text { position: absolute; top: 95px; left: -38px; font-family: Arial; color: #999999; text-transform: lowercase; letter-spacing: 3px; min-width: 160px; text-align: center;
-webkit-animation: opaa 5s infinite; /* Chrome, Safari 5+ */
-moz-animation: opaa 5s infinite; /* Firefox 5-15 */
-o-animation: opaa 5s infinite; /* Opera 12.00 */
animation: opaa 5s infinite; /* Chrome, Firefox 16+, IE 10+, Opera 12.10+ */
}
@-webkit-keyframes opaa { 0% {opacity: 1;} 10% {opacity: 0.5} 15% {opacity: 1;} 30% {opacity: 1;} 65% {opacity: 0.3;} 90% {opacity: 0.8;} }
@-moz-keyframes opaa { 0% {opacity: 1;} 10% {opacity: 0.5} 15% {opacity: 1;} 30% {opacity: 1;} 65% {opacity: 0.3;} 90% {opacity: 0.8;} }
@-o-keyframes opaa { 0% {opacity: 1;} 10% {opacity: 0.5} 15% {opacity: 1;} 30% {opacity: 1;} 65% {opacity: 0.3;} 90% {opacity: 0.8;} }
@keyframes opaa { 0% {opacity: 1;} 10% {opacity: 0.5} 15% {opacity: 1;} 30% {opacity: 1;} 65% {opacity: 0.3;} 90% {opacity: 0.8;} }