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'">
|
<meta http-equiv="refresh" content="5; url='shutdown.html'">
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
body {
|
html, body {
|
||||||
background-color: #00A9DA;
|
height: 100%;
|
||||||
}
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
.busy-loader {
|
width: 100%;
|
||||||
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;
|
|
||||||
}
|
}
|
||||||
}
|
body {
|
||||||
|
display: table;
|
||||||
.ball-1 {
|
background-color: #00A9DA;
|
||||||
-moz-animation-delay: 0.96s;
|
}
|
||||||
-webkit-animation-delay: 0.96s;
|
.my-block {
|
||||||
-ms-animation-delay: 0.96s;
|
text-align: center;
|
||||||
-o-animation-delay: 0.96s;
|
display: table-cell;
|
||||||
animation-delay: 0.96s;
|
vertical-align: middle;
|
||||||
}
|
}
|
||||||
|
.orange {
|
||||||
.ball-2 {
|
color: orange;
|
||||||
-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);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<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">
|
<div class="my-block">
|
||||||
<img src="shutdown.gif">
|
<img src="shutdown.gif">
|
||||||
</div> -->
|
|
||||||
<div class="busy-loader">
|
|
||||||
<div class="w-ball-wrapper ball-1">
|
|
||||||
<div class="w-ball">
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="w-ball-wrapper ball-2">
|
</body>
|
||||||
<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>
|
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue