新的loading和浏览器不兼容提示
This commit is contained in:
virusdefender
@@ -4,320 +4,32 @@
|
||||
<meta charset="utf-8">
|
||||
<title>Online Judge Admin</title>
|
||||
<style>
|
||||
.cssload-wraper{
|
||||
width:0px;
|
||||
display:block;
|
||||
margin: 200px auto;
|
||||
}
|
||||
|
||||
.cssload-dots {
|
||||
font-family: sans-serif;
|
||||
font-weight: 100;
|
||||
}
|
||||
|
||||
.cssload-dots:not(:required) {
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
text-indent: -19998px;
|
||||
display: inline-block;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
background: transparent;
|
||||
border-radius: 100%;
|
||||
box-shadow: rgb(255,136,102) -28px -28px 0 14px, rgb(255,204,102) 28px -28px 0 14px, rgb(102,221,119) 28px 28px 0 14px, rgb(68,170,238) -28px 28px 0 14px;
|
||||
-o-box-shadow: rgb(255,136,102) -28px -28px 0 14px, rgb(255,204,102) 28px -28px 0 14px, rgb(102,221,119) 28px 28px 0 14px, rgb(68,170,238) -28px 28px 0 14px;
|
||||
-ms-box-shadow: rgb(255,136,102) -28px -28px 0 14px, rgb(255,204,102) 28px -28px 0 14px, rgb(102,221,119) 28px 28px 0 14px, rgb(68,170,238) -28px 28px 0 14px;
|
||||
-webkit-box-shadow: rgb(255,136,102) -28px -28px 0 14px, rgb(255,204,102) 28px -28px 0 14px, rgb(102,221,119) 28px 28px 0 14px, rgb(68,170,238) -28px 28px 0 14px;
|
||||
-moz-box-shadow: rgb(255,136,102) -28px -28px 0 14px, rgb(255,204,102) 28px -28px 0 14px, rgb(102,221,119) 28px 28px 0 14px, rgb(68,170,238) -28px 28px 0 14px;
|
||||
animation: cssload-dots 4.25s infinite ease-in-out;
|
||||
-o-animation: cssload-dots 4.25s infinite ease-in-out;
|
||||
-ms-animation: cssload-dots 4.25s infinite ease-in-out;
|
||||
-webkit-animation: cssload-dots 4.25s infinite ease-in-out;
|
||||
-moz-animation: cssload-dots 4.25s infinite ease-in-out;
|
||||
transform-origin: 50% 50%;
|
||||
-o-transform-origin: 50% 50%;
|
||||
-ms-transform-origin: 50% 50%;
|
||||
-webkit-transform-origin: 50% 50%;
|
||||
-moz-transform-origin: 50% 50%;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@keyframes cssload-dots {
|
||||
0% {
|
||||
box-shadow: white 0 0 30px 0, rgb(255,136,102) -28px -28px 0 14px, rgb(255,204,102) 28px -28px 0 14px, rgb(102,221,119) 28px 28px 0 14px, rgb(68,170,238) -28px 28px 0 14px;
|
||||
}
|
||||
|
||||
8.33% {
|
||||
box-shadow: white 0 0 30px 0, rgb(255,136,102) 28px -28px 0 14px, rgb(255,204,102) 28px -28px 0 14px, rgb(102,221,119) 28px 28px 0 14px, rgb(68,170,238) -28px 28px 0 14px;
|
||||
}
|
||||
|
||||
16.67% {
|
||||
box-shadow: white 0 0 30px 0, rgb(255,136,102) 28px 28px 0 14px, rgb(255,204,102) 28px 28px 0 14px, rgb(102,221,119) 28px 28px 0 14px, rgb(68,170,238) -28px 28px 0 14px;
|
||||
}
|
||||
|
||||
25% {
|
||||
box-shadow: white 0 0 30px 0, #ff8866 -28px 28px 0 14px, #ffcc66 -28px 28px 0 14px, #66dd77 -28px 28px 0 14px, #44aaee -28px 28px 0 14px;
|
||||
}
|
||||
|
||||
33.33% {
|
||||
box-shadow: white 0 0 30px 0, #ff8866 -28px -28px 0 14px, #ffcc66 -28px 28px 0 14px, #66dd77 -28px -28px 0 14px, #44aaee -28px -28px 0 14px;
|
||||
}
|
||||
|
||||
41.67% {
|
||||
box-shadow: white 0 0 30px 0, #ff8866 28px -28px 0 14px, #ffcc66 -28px 28px 0 14px, #66dd77 -28px -28px 0 14px, #44aaee 28px -28px 0 14px;
|
||||
}
|
||||
|
||||
50% {
|
||||
box-shadow: white 0 0 30px 0, #ff8866 28px 28px 0 14px, #ffcc66 -28px 28px 0 14px, #66dd77 -28px -28px 0 14px, #44aaee 28px -28px 0 14px;
|
||||
}
|
||||
|
||||
58.33% {
|
||||
box-shadow: white 0 0 30px 0, #ff8866 -28px 28px 0 14px, #ffcc66 -28px 28px 0 14px, #66dd77 -28px -28px 0 14px, #44aaee 28px -28px 0 14px;
|
||||
}
|
||||
|
||||
66.67% {
|
||||
box-shadow: white 0 0 30px 0, #ff8866 -28px -28px 0 14px, #ffcc66 -28px -28px 0 14px, #66dd77 -28px -28px 0 14px, #44aaee 28px -28px 0 14px;
|
||||
}
|
||||
|
||||
75% {
|
||||
box-shadow: white 0 0 30px 0, #ff8866 28px -28px 0 14px, #ffcc66 28px -28px 0 14px, #66dd77 28px -28px 0 14px, #44aaee 28px -28px 0 14px;
|
||||
}
|
||||
|
||||
83.33% {
|
||||
box-shadow: white 0 0 30px 0, #ff8866 28px 28px 0 14px, #ffcc66 28px -28px 0 14px, #66dd77 28px 28px 0 14px, #44aaee 28px 28px 0 14px;
|
||||
}
|
||||
|
||||
91.67% {
|
||||
box-shadow: white 0 0 30px 0, #ff8866 -28px 28px 0 14px, #ffcc66 28px -28px 0 14px, #66dd77 28px 28px 0 14px, #44aaee -28px 28px 0 14px;
|
||||
}
|
||||
|
||||
100% {
|
||||
box-shadow: white 0 0 30px 0, #ff8866 -28px -28px 0 14px, #ffcc66 28px -28px 0 14px, #66dd77 28px 28px 0 14px, #44aaee -28px 28px 0 14px;
|
||||
}
|
||||
}
|
||||
|
||||
@-o-keyframes cssload-dots {
|
||||
0% {
|
||||
box-shadow: white 0 0 30px 0, rgb(255,136,102) -28px -28px 0 14px, rgb(255,204,102) 28px -28px 0 14px, rgb(102,221,119) 28px 28px 0 14px, rgb(68,170,238) -28px 28px 0 14px;
|
||||
}
|
||||
|
||||
8.33% {
|
||||
box-shadow: white 0 0 30px 0, rgb(255,136,102) 28px -28px 0 14px, rgb(255,204,102) 28px -28px 0 14px, rgb(102,221,119) 28px 28px 0 14px, rgb(68,170,238) -28px 28px 0 14px;
|
||||
}
|
||||
|
||||
16.67% {
|
||||
box-shadow: white 0 0 30px 0, rgb(255,136,102) 28px 28px 0 14px, rgb(255,204,102) 28px 28px 0 14px, rgb(102,221,119) 28px 28px 0 14px, rgb(68,170,238) -28px 28px 0 14px;
|
||||
}
|
||||
|
||||
25% {
|
||||
box-shadow: white 0 0 30px 0, #ff8866 -28px 28px 0 14px, #ffcc66 -28px 28px 0 14px, #66dd77 -28px 28px 0 14px, #44aaee -28px 28px 0 14px;
|
||||
}
|
||||
|
||||
33.33% {
|
||||
box-shadow: white 0 0 30px 0, #ff8866 -28px -28px 0 14px, #ffcc66 -28px 28px 0 14px, #66dd77 -28px -28px 0 14px, #44aaee -28px -28px 0 14px;
|
||||
}
|
||||
|
||||
41.67% {
|
||||
box-shadow: white 0 0 30px 0, #ff8866 28px -28px 0 14px, #ffcc66 -28px 28px 0 14px, #66dd77 -28px -28px 0 14px, #44aaee 28px -28px 0 14px;
|
||||
}
|
||||
|
||||
50% {
|
||||
box-shadow: white 0 0 30px 0, #ff8866 28px 28px 0 14px, #ffcc66 -28px 28px 0 14px, #66dd77 -28px -28px 0 14px, #44aaee 28px -28px 0 14px;
|
||||
}
|
||||
|
||||
58.33% {
|
||||
box-shadow: white 0 0 30px 0, #ff8866 -28px 28px 0 14px, #ffcc66 -28px 28px 0 14px, #66dd77 -28px -28px 0 14px, #44aaee 28px -28px 0 14px;
|
||||
}
|
||||
|
||||
66.67% {
|
||||
box-shadow: white 0 0 30px 0, #ff8866 -28px -28px 0 14px, #ffcc66 -28px -28px 0 14px, #66dd77 -28px -28px 0 14px, #44aaee 28px -28px 0 14px;
|
||||
}
|
||||
|
||||
75% {
|
||||
box-shadow: white 0 0 30px 0, #ff8866 28px -28px 0 14px, #ffcc66 28px -28px 0 14px, #66dd77 28px -28px 0 14px, #44aaee 28px -28px 0 14px;
|
||||
}
|
||||
|
||||
83.33% {
|
||||
box-shadow: white 0 0 30px 0, #ff8866 28px 28px 0 14px, #ffcc66 28px -28px 0 14px, #66dd77 28px 28px 0 14px, #44aaee 28px 28px 0 14px;
|
||||
}
|
||||
|
||||
91.67% {
|
||||
box-shadow: white 0 0 30px 0, #ff8866 -28px 28px 0 14px, #ffcc66 28px -28px 0 14px, #66dd77 28px 28px 0 14px, #44aaee -28px 28px 0 14px;
|
||||
}
|
||||
|
||||
100% {
|
||||
box-shadow: white 0 0 30px 0, #ff8866 -28px -28px 0 14px, #ffcc66 28px -28px 0 14px, #66dd77 28px 28px 0 14px, #44aaee -28px 28px 0 14px;
|
||||
}
|
||||
}
|
||||
|
||||
@-ms-keyframes cssload-dots {
|
||||
0% {
|
||||
box-shadow: white 0 0 30px 0, rgb(255,136,102) -28px -28px 0 14px, rgb(255,204,102) 28px -28px 0 14px, rgb(102,221,119) 28px 28px 0 14px, rgb(68,170,238) -28px 28px 0 14px;
|
||||
}
|
||||
|
||||
8.33% {
|
||||
box-shadow: white 0 0 30px 0, rgb(255,136,102) 28px -28px 0 14px, rgb(255,204,102) 28px -28px 0 14px, rgb(102,221,119) 28px 28px 0 14px, rgb(68,170,238) -28px 28px 0 14px;
|
||||
}
|
||||
|
||||
16.67% {
|
||||
box-shadow: white 0 0 30px 0, rgb(255,136,102) 28px 28px 0 14px, rgb(255,204,102) 28px 28px 0 14px, rgb(102,221,119) 28px 28px 0 14px, rgb(68,170,238) -28px 28px 0 14px;
|
||||
}
|
||||
|
||||
25% {
|
||||
box-shadow: white 0 0 30px 0, #ff8866 -28px 28px 0 14px, #ffcc66 -28px 28px 0 14px, #66dd77 -28px 28px 0 14px, #44aaee -28px 28px 0 14px;
|
||||
}
|
||||
|
||||
33.33% {
|
||||
box-shadow: white 0 0 30px 0, #ff8866 -28px -28px 0 14px, #ffcc66 -28px 28px 0 14px, #66dd77 -28px -28px 0 14px, #44aaee -28px -28px 0 14px;
|
||||
}
|
||||
|
||||
41.67% {
|
||||
box-shadow: white 0 0 30px 0, #ff8866 28px -28px 0 14px, #ffcc66 -28px 28px 0 14px, #66dd77 -28px -28px 0 14px, #44aaee 28px -28px 0 14px;
|
||||
}
|
||||
|
||||
50% {
|
||||
box-shadow: white 0 0 30px 0, #ff8866 28px 28px 0 14px, #ffcc66 -28px 28px 0 14px, #66dd77 -28px -28px 0 14px, #44aaee 28px -28px 0 14px;
|
||||
}
|
||||
|
||||
58.33% {
|
||||
box-shadow: white 0 0 30px 0, #ff8866 -28px 28px 0 14px, #ffcc66 -28px 28px 0 14px, #66dd77 -28px -28px 0 14px, #44aaee 28px -28px 0 14px;
|
||||
}
|
||||
|
||||
66.67% {
|
||||
box-shadow: white 0 0 30px 0, #ff8866 -28px -28px 0 14px, #ffcc66 -28px -28px 0 14px, #66dd77 -28px -28px 0 14px, #44aaee 28px -28px 0 14px;
|
||||
}
|
||||
|
||||
75% {
|
||||
box-shadow: white 0 0 30px 0, #ff8866 28px -28px 0 14px, #ffcc66 28px -28px 0 14px, #66dd77 28px -28px 0 14px, #44aaee 28px -28px 0 14px;
|
||||
}
|
||||
|
||||
83.33% {
|
||||
box-shadow: white 0 0 30px 0, #ff8866 28px 28px 0 14px, #ffcc66 28px -28px 0 14px, #66dd77 28px 28px 0 14px, #44aaee 28px 28px 0 14px;
|
||||
}
|
||||
|
||||
91.67% {
|
||||
box-shadow: white 0 0 30px 0, #ff8866 -28px 28px 0 14px, #ffcc66 28px -28px 0 14px, #66dd77 28px 28px 0 14px, #44aaee -28px 28px 0 14px;
|
||||
}
|
||||
|
||||
100% {
|
||||
box-shadow: white 0 0 30px 0, #ff8866 -28px -28px 0 14px, #ffcc66 28px -28px 0 14px, #66dd77 28px 28px 0 14px, #44aaee -28px 28px 0 14px;
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes cssload-dots {
|
||||
0% {
|
||||
box-shadow: white 0 0 30px 0, rgb(255,136,102) -28px -28px 0 14px, rgb(255,204,102) 28px -28px 0 14px, rgb(102,221,119) 28px 28px 0 14px, rgb(68,170,238) -28px 28px 0 14px;
|
||||
}
|
||||
|
||||
8.33% {
|
||||
box-shadow: white 0 0 30px 0, rgb(255,136,102) 28px -28px 0 14px, rgb(255,204,102) 28px -28px 0 14px, rgb(102,221,119) 28px 28px 0 14px, rgb(68,170,238) -28px 28px 0 14px;
|
||||
}
|
||||
|
||||
16.67% {
|
||||
box-shadow: white 0 0 30px 0, rgb(255,136,102) 28px 28px 0 14px, rgb(255,204,102) 28px 28px 0 14px, rgb(102,221,119) 28px 28px 0 14px, rgb(68,170,238) -28px 28px 0 14px;
|
||||
}
|
||||
|
||||
25% {
|
||||
box-shadow: white 0 0 30px 0, #ff8866 -28px 28px 0 14px, #ffcc66 -28px 28px 0 14px, #66dd77 -28px 28px 0 14px, #44aaee -28px 28px 0 14px;
|
||||
}
|
||||
|
||||
33.33% {
|
||||
box-shadow: white 0 0 30px 0, #ff8866 -28px -28px 0 14px, #ffcc66 -28px 28px 0 14px, #66dd77 -28px -28px 0 14px, #44aaee -28px -28px 0 14px;
|
||||
}
|
||||
|
||||
41.67% {
|
||||
box-shadow: white 0 0 30px 0, #ff8866 28px -28px 0 14px, #ffcc66 -28px 28px 0 14px, #66dd77 -28px -28px 0 14px, #44aaee 28px -28px 0 14px;
|
||||
}
|
||||
|
||||
50% {
|
||||
box-shadow: white 0 0 30px 0, #ff8866 28px 28px 0 14px, #ffcc66 -28px 28px 0 14px, #66dd77 -28px -28px 0 14px, #44aaee 28px -28px 0 14px;
|
||||
}
|
||||
|
||||
58.33% {
|
||||
box-shadow: white 0 0 30px 0, #ff8866 -28px 28px 0 14px, #ffcc66 -28px 28px 0 14px, #66dd77 -28px -28px 0 14px, #44aaee 28px -28px 0 14px;
|
||||
}
|
||||
|
||||
66.67% {
|
||||
box-shadow: white 0 0 30px 0, #ff8866 -28px -28px 0 14px, #ffcc66 -28px -28px 0 14px, #66dd77 -28px -28px 0 14px, #44aaee 28px -28px 0 14px;
|
||||
}
|
||||
|
||||
75% {
|
||||
box-shadow: white 0 0 30px 0, #ff8866 28px -28px 0 14px, #ffcc66 28px -28px 0 14px, #66dd77 28px -28px 0 14px, #44aaee 28px -28px 0 14px;
|
||||
}
|
||||
|
||||
83.33% {
|
||||
box-shadow: white 0 0 30px 0, #ff8866 28px 28px 0 14px, #ffcc66 28px -28px 0 14px, #66dd77 28px 28px 0 14px, #44aaee 28px 28px 0 14px;
|
||||
}
|
||||
|
||||
91.67% {
|
||||
box-shadow: white 0 0 30px 0, #ff8866 -28px 28px 0 14px, #ffcc66 28px -28px 0 14px, #66dd77 28px 28px 0 14px, #44aaee -28px 28px 0 14px;
|
||||
}
|
||||
|
||||
100% {
|
||||
box-shadow: white 0 0 30px 0, #ff8866 -28px -28px 0 14px, #ffcc66 28px -28px 0 14px, #66dd77 28px 28px 0 14px, #44aaee -28px 28px 0 14px;
|
||||
}
|
||||
}
|
||||
|
||||
@-moz-keyframes cssload-dots {
|
||||
0% {
|
||||
box-shadow: white 0 0 30px 0, rgb(255,136,102) -28px -28px 0 14px, rgb(255,204,102) 28px -28px 0 14px, rgb(102,221,119) 28px 28px 0 14px, rgb(68,170,238) -28px 28px 0 14px;
|
||||
}
|
||||
|
||||
8.33% {
|
||||
box-shadow: white 0 0 30px 0, rgb(255,136,102) 28px -28px 0 14px, rgb(255,204,102) 28px -28px 0 14px, rgb(102,221,119) 28px 28px 0 14px, rgb(68,170,238) -28px 28px 0 14px;
|
||||
}
|
||||
|
||||
16.67% {
|
||||
box-shadow: white 0 0 30px 0, rgb(255,136,102) 28px 28px 0 14px, rgb(255,204,102) 28px 28px 0 14px, rgb(102,221,119) 28px 28px 0 14px, rgb(68,170,238) -28px 28px 0 14px;
|
||||
}
|
||||
|
||||
25% {
|
||||
box-shadow: white 0 0 30px 0, #ff8866 -28px 28px 0 14px, #ffcc66 -28px 28px 0 14px, #66dd77 -28px 28px 0 14px, #44aaee -28px 28px 0 14px;
|
||||
}
|
||||
|
||||
33.33% {
|
||||
box-shadow: white 0 0 30px 0, #ff8866 -28px -28px 0 14px, #ffcc66 -28px 28px 0 14px, #66dd77 -28px -28px 0 14px, #44aaee -28px -28px 0 14px;
|
||||
}
|
||||
|
||||
41.67% {
|
||||
box-shadow: white 0 0 30px 0, #ff8866 28px -28px 0 14px, #ffcc66 -28px 28px 0 14px, #66dd77 -28px -28px 0 14px, #44aaee 28px -28px 0 14px;
|
||||
}
|
||||
|
||||
50% {
|
||||
box-shadow: white 0 0 30px 0, #ff8866 28px 28px 0 14px, #ffcc66 -28px 28px 0 14px, #66dd77 -28px -28px 0 14px, #44aaee 28px -28px 0 14px;
|
||||
}
|
||||
|
||||
58.33% {
|
||||
box-shadow: white 0 0 30px 0, #ff8866 -28px 28px 0 14px, #ffcc66 -28px 28px 0 14px, #66dd77 -28px -28px 0 14px, #44aaee 28px -28px 0 14px;
|
||||
}
|
||||
|
||||
66.67% {
|
||||
box-shadow: white 0 0 30px 0, #ff8866 -28px -28px 0 14px, #ffcc66 -28px -28px 0 14px, #66dd77 -28px -28px 0 14px, #44aaee 28px -28px 0 14px;
|
||||
}
|
||||
|
||||
75% {
|
||||
box-shadow: white 0 0 30px 0, #ff8866 28px -28px 0 14px, #ffcc66 28px -28px 0 14px, #66dd77 28px -28px 0 14px, #44aaee 28px -28px 0 14px;
|
||||
}
|
||||
|
||||
83.33% {
|
||||
box-shadow: white 0 0 30px 0, #ff8866 28px 28px 0 14px, #ffcc66 28px -28px 0 14px, #66dd77 28px 28px 0 14px, #44aaee 28px 28px 0 14px;
|
||||
}
|
||||
|
||||
91.67% {
|
||||
box-shadow: white 0 0 30px 0, #ff8866 -28px 28px 0 14px, #ffcc66 28px -28px 0 14px, #66dd77 28px 28px 0 14px, #44aaee -28px 28px 0 14px;
|
||||
}
|
||||
|
||||
100% {
|
||||
box-shadow: white 0 0 30px 0, #ff8866 -28px -28px 0 14px, #ffcc66 28px -28px 0 14px, #66dd77 28px 28px 0 14px, #44aaee -28px 28px 0 14px;
|
||||
}
|
||||
}
|
||||
#loading {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 400px;
|
||||
height: 400px;
|
||||
margin-top: -200px;
|
||||
margin-left: -200px;
|
||||
}
|
||||
#browser-unsupported {
|
||||
padding: 8px 0;
|
||||
background: #FBE3E4;
|
||||
color: #8A1F11;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="cssload-wraper" id="loading">
|
||||
<div class="cssload-dots"></div>
|
||||
</div>
|
||||
<div id="browser-unsupported" style="display: none">Your browser is <strong>NOT</strong> supported. click <a href="http://browsehappy.com/">here</a> tp upgrade your browser.</div>
|
||||
<script>
|
||||
// new version IE do not have 'MSIE' in ua
|
||||
if (navigator.userAgent.indexOf("MSIE") > -1) {
|
||||
document.getElementById("browser-unsupported").removeAttribute("style");
|
||||
}
|
||||
</script>
|
||||
<img src="../static/img/loading.jpg" id="loading">
|
||||
<div id="app">
|
||||
</div>
|
||||
</body>
|
||||
|
||||
Reference in New Issue
Block a user