Update shuttingdown.html
This commit is contained in:
GitHub
parent
fa09fc48e3
commit
f3a9a6be84
|
|
@ -3,388 +3,29 @@
|
|||
<meta http-equiv="refresh" content="5; url='shutdown.html'">
|
||||
|
||||
<style>
|
||||
body {
|
||||
background-color: #00A9DA;
|
||||
}
|
||||
|
||||
.busy-loader {
|
||||
position: absolute;
|
||||
width: 90px;
|
||||
height: 90px;
|
||||
margin: auto;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-left: -45px;
|
||||
margin-top: -45px;
|
||||
|
||||
.w-ball-wrapper {
|
||||
position: absolute;
|
||||
width: 86px;
|
||||
height: 86px;
|
||||
opacity: 0;
|
||||
-moz-transform: rotate(225deg);
|
||||
-moz-animation: orbit 4.4s infinite;
|
||||
-webkit-transform: rotate(225deg);
|
||||
-webkit-animation: orbit 4.4s infinite;
|
||||
-ms-transform: rotate(225deg);
|
||||
-ms-animation: orbit 4.4s infinite;
|
||||
-o-transform: rotate(225deg);
|
||||
-o-animation: orbit 4.4s infinite;
|
||||
transform: rotate(225deg);
|
||||
animation: orbit 4.4s infinite;
|
||||
|
||||
.w-ball {
|
||||
position: absolute;
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
background: #FFFFFF;
|
||||
left: 0px;
|
||||
top: 0px;
|
||||
-moz-border-radius: 11px;
|
||||
-webkit-border-radius: 11px;
|
||||
-ms-border-radius: 11px;
|
||||
-o-border-radius: 11px;
|
||||
border-radius: 11px;
|
||||
html, body {
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.ball-1 {
|
||||
-moz-animation-delay: 0.96s;
|
||||
-webkit-animation-delay: 0.96s;
|
||||
-ms-animation-delay: 0.96s;
|
||||
-o-animation-delay: 0.96s;
|
||||
animation-delay: 0.96s;
|
||||
}
|
||||
|
||||
.ball-2 {
|
||||
-moz-animation-delay: 0.19s;
|
||||
-webkit-animation-delay: 0.19s;
|
||||
-ms-animation-delay: 0.19s;
|
||||
-o-animation-delay: 0.19s;
|
||||
animation-delay: 0.19s;
|
||||
}
|
||||
|
||||
.ball-3 {
|
||||
-moz-animation-delay: 0.38s;
|
||||
-webkit-animation-delay: 0.38s;
|
||||
-ms-animation-delay: 0.38s;
|
||||
-o-animation-delay: 0.38s;
|
||||
animation-delay: 0.38s;
|
||||
}
|
||||
|
||||
.ball-4 {
|
||||
-moz-animation-delay: 0.58s;
|
||||
-webkit-animation-delay: 0.58s;
|
||||
-ms-animation-delay: 0.58s;
|
||||
-o-animation-delay: 0.58s;
|
||||
animation-delay: 0.58s;
|
||||
}
|
||||
|
||||
.ball-5 {
|
||||
-moz-animation-delay: 0.77s;
|
||||
-webkit-animation-delay: 0.77s;
|
||||
-ms-animation-delay: 0.77s;
|
||||
-o-animation-delay: 0.77s;
|
||||
animation-delay: 0.77s;
|
||||
}
|
||||
}
|
||||
|
||||
@-moz-keyframes orbit {
|
||||
0% {
|
||||
opacity: 1;
|
||||
z-index: 99;
|
||||
-moz-transform: rotate(180deg);
|
||||
-moz-animation-timing-function: ease-out;
|
||||
}
|
||||
|
||||
7% {
|
||||
opacity: 1;
|
||||
-moz-transform: rotate(300deg);
|
||||
-moz-animation-timing-function: linear;
|
||||
-moz-origin: 0%;
|
||||
}
|
||||
|
||||
30% {
|
||||
opacity: 1;
|
||||
-moz-transform: rotate(410deg);
|
||||
-moz-animation-timing-function: ease-in-out;
|
||||
-moz-origin: 7%;
|
||||
}
|
||||
|
||||
39% {
|
||||
opacity: 1;
|
||||
-moz-transform: rotate(645deg);
|
||||
-moz-animation-timing-function: linear;
|
||||
-moz-origin: 30%;
|
||||
}
|
||||
|
||||
70% {
|
||||
opacity: 1;
|
||||
-moz-transform: rotate(770deg);
|
||||
-moz-animation-timing-function: ease-out;
|
||||
-moz-origin: 39%;
|
||||
}
|
||||
|
||||
75% {
|
||||
opacity: 1;
|
||||
-moz-transform: rotate(900deg);
|
||||
-moz-animation-timing-function: ease-out;
|
||||
-moz-origin: 70%;
|
||||
}
|
||||
|
||||
76% {
|
||||
opacity: 0;
|
||||
-moz-transform: rotate(900deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0;
|
||||
-moz-transform: rotate(900deg);
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes orbit {
|
||||
0% {
|
||||
opacity: 1;
|
||||
z-index: 99;
|
||||
-webkit-transform: rotate(180deg);
|
||||
-webkit-animation-timing-function: ease-out;
|
||||
}
|
||||
|
||||
7% {
|
||||
opacity: 1;
|
||||
-webkit-transform: rotate(300deg);
|
||||
-webkit-animation-timing-function: linear;
|
||||
-webkit-origin: 0%;
|
||||
}
|
||||
|
||||
30% {
|
||||
opacity: 1;
|
||||
-webkit-transform: rotate(410deg);
|
||||
-webkit-animation-timing-function: ease-in-out;
|
||||
-webkit-origin: 7%;
|
||||
}
|
||||
|
||||
39% {
|
||||
opacity: 1;
|
||||
-webkit-transform: rotate(645deg);
|
||||
-webkit-animation-timing-function: linear;
|
||||
-webkit-origin: 30%;
|
||||
}
|
||||
|
||||
70% {
|
||||
opacity: 1;
|
||||
-webkit-transform: rotate(770deg);
|
||||
-webkit-animation-timing-function: ease-out;
|
||||
-webkit-origin: 39%;
|
||||
}
|
||||
|
||||
75% {
|
||||
opacity: 1;
|
||||
-webkit-transform: rotate(900deg);
|
||||
-webkit-animation-timing-function: ease-out;
|
||||
-webkit-origin: 70%;
|
||||
}
|
||||
|
||||
76% {
|
||||
opacity: 0;
|
||||
-webkit-transform: rotate(900deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0;
|
||||
-webkit-transform: rotate(900deg);
|
||||
}
|
||||
}
|
||||
|
||||
@-ms-keyframes orbit {
|
||||
0% {
|
||||
opacity: 1;
|
||||
z-index: 99;
|
||||
-ms-transform: rotate(180deg);
|
||||
-ms-animation-timing-function: ease-out;
|
||||
}
|
||||
|
||||
7% {
|
||||
opacity: 1;
|
||||
-ms-transform: rotate(300deg);
|
||||
-ms-animation-timing-function: linear;
|
||||
-ms-origin: 0%;
|
||||
}
|
||||
|
||||
30% {
|
||||
opacity: 1;
|
||||
-ms-transform: rotate(410deg);
|
||||
-ms-animation-timing-function: ease-in-out;
|
||||
-ms-origin: 7%;
|
||||
}
|
||||
|
||||
39% {
|
||||
opacity: 1;
|
||||
-ms-transform: rotate(645deg);
|
||||
-ms-animation-timing-function: linear;
|
||||
-ms-origin: 30%;
|
||||
}
|
||||
|
||||
70% {
|
||||
opacity: 1;
|
||||
-ms-transform: rotate(770deg);
|
||||
-ms-animation-timing-function: ease-out;
|
||||
-ms-origin: 39%;
|
||||
}
|
||||
|
||||
75% {
|
||||
opacity: 1;
|
||||
-ms-transform: rotate(900deg);
|
||||
-ms-animation-timing-function: ease-out;
|
||||
-ms-origin: 70%;
|
||||
}
|
||||
|
||||
76% {
|
||||
opacity: 0;
|
||||
-ms-transform: rotate(900deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0;
|
||||
-ms-transform: rotate(900deg);
|
||||
}
|
||||
}
|
||||
|
||||
@-o-keyframes orbit {
|
||||
0% {
|
||||
opacity: 1;
|
||||
z-index: 99;
|
||||
-o-transform: rotate(180deg);
|
||||
-o-animation-timing-function: ease-out;
|
||||
}
|
||||
|
||||
7% {
|
||||
opacity: 1;
|
||||
-o-transform: rotate(300deg);
|
||||
-o-animation-timing-function: linear;
|
||||
-o-origin: 0%;
|
||||
}
|
||||
|
||||
30% {
|
||||
opacity: 1;
|
||||
-o-transform: rotate(410deg);
|
||||
-o-animation-timing-function: ease-in-out;
|
||||
-o-origin: 7%;
|
||||
}
|
||||
|
||||
39% {
|
||||
opacity: 1;
|
||||
-o-transform: rotate(645deg);
|
||||
-o-animation-timing-function: linear;
|
||||
-o-origin: 30%;
|
||||
}
|
||||
|
||||
70% {
|
||||
opacity: 1;
|
||||
-o-transform: rotate(770deg);
|
||||
-o-animation-timing-function: ease-out;
|
||||
-o-origin: 39%;
|
||||
}
|
||||
|
||||
75% {
|
||||
opacity: 1;
|
||||
-o-transform: rotate(900deg);
|
||||
-o-animation-timing-function: ease-out;
|
||||
-o-origin: 70%;
|
||||
}
|
||||
|
||||
76% {
|
||||
opacity: 0;
|
||||
-o-transform: rotate(900deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0;
|
||||
-o-transform: rotate(900deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes orbit {
|
||||
0% {
|
||||
opacity: 1;
|
||||
z-index: 99;
|
||||
transform: rotate(180deg);
|
||||
animation-timing-function: ease-out;
|
||||
}
|
||||
|
||||
7% {
|
||||
opacity: 1;
|
||||
transform: rotate(300deg);
|
||||
animation-timing-function: linear;
|
||||
origin: 0%;
|
||||
}
|
||||
|
||||
30% {
|
||||
opacity: 1;
|
||||
transform: rotate(410deg);
|
||||
animation-timing-function: ease-in-out;
|
||||
origin: 7%;
|
||||
}
|
||||
|
||||
39% {
|
||||
opacity: 1;
|
||||
transform: rotate(645deg);
|
||||
animation-timing-function: linear;
|
||||
origin: 30%;
|
||||
}
|
||||
|
||||
70% {
|
||||
opacity: 1;
|
||||
transform: rotate(770deg);
|
||||
animation-timing-function: ease-out;
|
||||
origin: 39%;
|
||||
}
|
||||
|
||||
75% {
|
||||
opacity: 1;
|
||||
transform: rotate(900deg);
|
||||
animation-timing-function: ease-out;
|
||||
origin: 70%;
|
||||
}
|
||||
|
||||
76% {
|
||||
opacity: 0;
|
||||
transform: rotate(900deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: rotate(900deg);
|
||||
}
|
||||
}
|
||||
body {
|
||||
display: table;
|
||||
background-color: #00A9DA;
|
||||
}
|
||||
.my-block {
|
||||
text-align: center;
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.orange {
|
||||
color: orange;
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- <embed src="shutdown.mp3" width="0" height="0" loop="false" autostart="true" hidden="true" />
|
||||
<embed src="shutdown.mp3" width="0" height="0" loop="false" autostart="true" hidden="true" />
|
||||
<div class="my-block">
|
||||
<img src="shutdown.gif">
|
||||
</div> -->
|
||||
<div class="busy-loader">
|
||||
<div class="w-ball-wrapper ball-1">
|
||||
<div class="w-ball">
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-ball-wrapper ball-2">
|
||||
<div class="w-ball">
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-ball-wrapper ball-3">
|
||||
<div class="w-ball">
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-ball-wrapper ball-4">
|
||||
<div class="w-ball">
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-ball-wrapper ball-5">
|
||||
<div class=" w-ball">
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Reference in a new issue