firepup-site/public/pages/test-loader.html

270 lines
6.3 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>FP650 - Unfinished page</title>
<link href="/style.css" rel="stylesheet" type="text/css" />
<link href="/styles/bounce.css" rel="stylesheet" type="text/css" />
<!-- <script async src="https://api.countapi.xyz/hit/firepup650.repl.co/visits"></script> -->
<!-- <script async src="https://api.countapi.xyz/hit/firepup650.repl.co/construction"></script> -->
<style>
.cssload-cssload-wrap2 {
width: 169px;
height: 169px;
overflow: hidden;
}
.cssload-wrap {
position: absolute;
width: 113px;
height: 113px;
left: 50%;
top: 50%;
margin-top: -56px;
margin-left: -56px;
transform: scale(2);
-o-transform: scale(2);
-ms-transform: scale(2);
-webkit-transform: scale(2);
-moz-transform: scale(2);
}
.cssload-wrap .cssload-overlay {
position: absolute;
width: 100%;
height: 100%;
z-index: 100;
box-shadow: 0 0 28px 43px rgb(0,0,0) inset;
-o-box-shadow: 0 0 28px 43px rgb(0,0,0) inset;
-ms-box-shadow: 0 0 28px 43px rgb(0,0,0) inset;
-webkit-box-shadow: 0 0 28px 43px rgb(0,0,0) inset;
-moz-box-shadow: 0 0 28px 43px rgb(0,0,0) inset;
}
.cssload-wrap .cssload-cogWheel {
position: absolute;
top: 50%;
margin-top: -28px;
width: 56px;
height: 56px;
}
.cssload-wrap .cssload-cogWheel.cssload-one {
left: -7.25px;
animation: cssload-rotLeft 0.5s infinite linear;
-o-animation: cssload-rotLeft 0.5s infinite linear;
-ms-animation: cssload-rotLeft 0.5s infinite linear;
-webkit-animation: cssload-rotLeft 0.5s infinite linear;
-moz-animation: cssload-rotLeft 0.5s infinite linear;
}
.cssload-wrap .cssload-cogWheel.cssload-one .cssload-one:before {
border: none;
}
.cssload-wrap .cssload-cogWheel.cssload-two {
right: -7.25px;
margin-top: -27px;
transform: rotate(196deg);
-o-transform: rotate(196deg);
-ms-transform: rotate(196deg);
-webkit-transform: rotate(196deg);
-moz-transform: rotate(196deg);
animation: cssload-rotRight 0.5s infinite linear;
-o-animation: cssload-rotRight 0.5s infinite linear;
-ms-animation: cssload-rotRight 0.5s infinite linear;
-webkit-animation: cssload-rotRight 0.5s infinite linear;
-moz-animation: cssload-rotRight 0.5s infinite linear;
}
.cssload-wrap .cssload-cogWheel.cssload-two .cssload-one:before {
border: none;
}
.cssload-wrap .cssload-cogWheel .cssload-cog {
position: absolute;
width: 100%;
left: 0;
top: 50%;
}
.cssload-wrap .cssload-cogWheel .cssload-cog:after {
display: block;
position: absolute;
content: ' ';
border: 2px solid rgb(0,255,0);
border-left: none;
height: 10px;
width: 6px;
right: -10px;
top: -5px;
}
.cssload-wrap .cssload-cogWheel .cssload-cog:before {
display: block;
position: absolute;
content: ' ';
border-left: 2px solid rgb(0,255,0);
height: 11px;
width: 5px;
right: -7px;
top: -15px;
transform: rotate(-20deg);
-o-transform: rotate(-20deg);
-ms-transform: rotate(-20deg);
-webkit-transform: rotate(-20deg);
-moz-transform: rotate(-20deg);
}
.cssload-wrap .cssload-cogWheel .cssload-cog.cssload-one {
transform: rotate(-80deg);
-o-transform: rotate(-80deg);
-ms-transform: rotate(-80deg);
-webkit-transform: rotate(-80deg);
-moz-transform: rotate(-80deg);
}
.cssload-wrap .cssload-cogWheel .cssload-cog.cssload-two {
transform: rotate(-40deg);
-o-transform: rotate(-40deg);
-ms-transform: rotate(-40deg);
-webkit-transform: rotate(-40deg);
-moz-transform: rotate(-40deg);
}
.cssload-wrap .cssload-cogWheel .cssload-cog.cssload-three {
transform: rotate(0deg);
-o-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
}
.cssload-wrap .cssload-cogWheel .cssload-cog.cssload-four {
transform: rotate(40deg);
-o-transform: rotate(40deg);
-ms-transform: rotate(40deg);
-webkit-transform: rotate(40deg);
-moz-transform: rotate(40deg);
}
.cssload-wrap .cssload-cogWheel .cssload-cog.cssload-five {
transform: rotate(80deg);
-o-transform: rotate(80deg);
-ms-transform: rotate(80deg);
-webkit-transform: rotate(80deg);
-moz-transform: rotate(80deg);
}
@keyframes cssload-rotLeft {
from {
transform: rotate(-30deg);
}
to {
transform: rotate(10deg);
}
}
@-o-keyframes cssload-rotLeft {
from {
transform: rotate(-30deg);
}
to {
transform: rotate(10deg);
}
}
@-ms-keyframes cssload-rotLeft {
from {
transform: rotate(-30deg);
}
to {
transform: rotate(10deg);
}
}
@-webkit-keyframes cssload-rotLeft {
from {
transform: rotate(-30deg);
}
to {
transform: rotate(10deg);
}
}
@-moz-keyframes cssload-rotLeft {
from {
transform: rotate(-30deg);
}
to {
transform: rotate(10deg);
}
}
@keyframes cssload-rotRight {
from {
transform: rotate(-174deg);
}
to {
transform: rotate(-214deg);
}
}
@-o-keyframes cssload-rotRight {
from {
transform: rotate(-174deg);
}
to {
transform: rotate(-214deg);
}
}
@-ms-keyframes cssload-rotRight {
from {
transform: rotate(-174deg);
}
to {
transform: rotate(-214deg);
}
}
@-webkit-keyframes cssload-rotRight {
from {
transform: rotate(-174deg);
}
to {
transform: rotate(-214deg);
}
}
@-moz-keyframes cssload-rotRight {
from {
transform: rotate(-174deg);
}
to {
transform: rotate(-214deg);
}
}
</style>
</head>
<body>
<h5 hidden id='Maintenance' class="center"></h5>
<span class="center force-color">
<h3 id='Construction' class=center><span class="warning">Page under construction.</span></h3>
</span>
<div class="cssload-cssload-wrap2">
<div class="cssload-wrap">
<div class="cssload-overlay"></div>
<div class="cssload-cogWheel cssload-one">
<div class="cssload-cog cssload-one"></div>
<div class="cssload-cog cssload-two"></div>
<div class="cssload-cog cssload-three"></div>
<div class="cssload-cog cssload-four"></div>
<div class="cssload-cog cssload-five"></div>
<div class="cssload-center"></div>
</div>
<div class="cssload-cogWheel cssload-two">
<div class="cssload-cog cssload-one"></div>
<div class="cssload-cog cssload-two"></div>
<div class="cssload-cog cssload-three"></div>
<div class="cssload-cog cssload-four"></div>
<div class="cssload-cog cssload-five"></div>
<div class="cssload-center"></div>
</div>
</div>
</div>
<script src="/script.js"></script>
</body>
</html>