xuyue/OnlineJudge
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

增加loading；修改部分css

Browse Source
This commit is contained in:
LiYang
2016-07-31 22:40:52 +08:00
parent bcee7bca67
commit 0d5318b3e1
6 changed files with 583 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

564
frontend/static/css/loading.css Normal file
View File

@@ -0,0 +1,564 @@
.cssload-battery {
display: block;
margin: 175px auto;
position: relative;
width: 4.25rem;
height: 7.5rem;
box-shadow: 0 0 0 0.2rem rgb(66, 92, 119);
-o-box-shadow: 0 0 0 0.2rem rgb(66, 92, 119);
-ms-box-shadow: 0 0 0 0.2rem rgb(66, 92, 119);
-webkit-box-shadow: 0 0 0 0.2rem rgb(66, 92, 119);
-moz-box-shadow: 0 0 0 0.2rem rgb(66, 92, 119);
border-radius: 0.09rem;
-o-border-radius: 0.09rem;
-ms-border-radius: 0.09rem;
-webkit-border-radius: 0.09rem;
-moz-border-radius: 0.09rem;
background: white;
}
.cssload-battery:before {
content: '';
position: absolute;
left: 0.8625rem;
right: 0.5625rem;
top: -0.8375rem;
height: 0.7375rem;
width: 2.125rem;
background: rgb(66, 92, 119);
border-radius: 0.18rem;
-o-border-radius: 0.18rem;
-ms-border-radius: 0.18rem;
-webkit-border-radius: 0.18rem;
-moz-border-radius: 0.18rem;
}
.cssload-battery:after {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
border-right: 4.25rem solid transparent;
border-bottom: 7.05rem solid rgba(255, 255, 255, 0.325);
}
.cssload-liquid {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 4.25rem;
background: rgb(113, 251, 133);
animation: load 5.96s infinite;
-o-animation: load 5.96s infinite;
-ms-animation: load 5.96s infinite;
-webkit-animation: load 5.96s infinite;
-moz-animation: load 5.96s infinite;
}
.cssload-liquid:after, .cssload-liquid:before {
content: '';
position: absolute;
top: -0.5rem;
height: 2.125rem;
width: 2.4625rem;
background: rgb(113, 251, 133);
opacity: 0;
border-radius: 50%;
-o-border-radius: 50%;
-ms-border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
}
.cssload-liquid:after {
right: 0;
animation: cssload-liquid-1 5.96s infinite;
-o-animation: cssload-liquid-1 5.96s infinite;
-ms-animation: cssload-liquid-1 5.96s infinite;
-webkit-animation: cssload-liquid-1 5.96s infinite;
-moz-animation: cssload-liquid-1 5.96s infinite;
}
.cssload-liquid:before {
left: 0;
animation: cssload-liquid-2 5.96s infinite;
-o-animation: cssload-liquid-2 5.96s infinite;
-ms-animation: cssload-liquid-2 5.96s infinite;
-webkit-animation: cssload-liquid-2 5.96s infinite;
-moz-animation: cssload-liquid-2 5.96s infinite;
}
@keyframes load {
0% {
top: 7.5rem;
}
70% {
top: 2.125rem;
}
90% {
top: 0;
}
95% {
top: 0;
}
100% {
top: 7.5rem;
}
}
@-o-keyframes load {
0% {
top: 7.5rem;
}
70% {
top: 2.125rem;
}
90% {
top: 0;
}
95% {
top: 0;
}
100% {
top: 7.5rem;
}
}
@-ms-keyframes load {
0% {
top: 7.5rem;
}
70% {
top: 2.125rem;
}
90% {
top: 0;
}
95% {
top: 0;
}
100% {
top: 7.5rem;
}
}
@-webkit-keyframes load {
0% {
top: 7.5rem;
}
70% {
top: 2.125rem;
}
90% {
top: 0;
}
95% {
top: 0;
}
100% {
top: 7.5rem;
}
}
@-moz-keyframes load {
0% {
top: 7.5rem;
}
70% {
top: 2.125rem;
}
90% {
top: 0;
}
95% {
top: 0;
}
100% {
top: 7.5rem;
}
}
@keyframes cssload-liquid-1 {
0% {
height: 0;
opacity: 0;
top: -0.5rem;
}
22% {
height: 0.28125rem;
top: 0.375rem;
opacity: 1;
}
25% {
top: -0.25rem;
}
35% {
height: 2.125rem;
top: -0.5rem;
}
55% {
height: 0.28125rem;
top: -0.125rem;
}
60% {
height: 0.61875rem;
opacity: 1;
top: -0.275rem;
}
96% {
height: 1.84375rem;
opacity: 0;
top: 0.5rem;
}
100% {
height: 0;
opacity: 0;
}
}
@-o-keyframes cssload-liquid-1 {
0% {
height: 0;
opacity: 0;
top: -0.5rem;
}
22% {
height: 0.28125rem;
top: 0.375rem;
opacity: 1;
}
25% {
top: -0.25rem;
}
35% {
height: 2.125rem;
top: -0.5rem;
}
55% {
height: 0.28125rem;
top: -0.125rem;
}
60% {
height: 0.61875rem;
opacity: 1;
top: -0.275rem;
}
96% {
height: 1.84375rem;
opacity: 0;
top: 0.5rem;
}
100% {
height: 0;
opacity: 0;
}
}
@-ms-keyframes cssload-liquid-1 {
0% {
height: 0;
opacity: 0;
top: -0.5rem;
}
22% {
height: 0.28125rem;
top: 0.375rem;
opacity: 1;
}
25% {
top: -0.25rem;
}
35% {
height: 2.125rem;
top: -0.5rem;
}
55% {
height: 0.28125rem;
top: -0.125rem;
}
60% {
height: 0.61875rem;
opacity: 1;
top: -0.275rem;
}
96% {
height: 1.84375rem;
opacity: 0;
top: 0.5rem;
}
100% {
height: 0;
opacity: 0;
}
}
@-webkit-keyframes cssload-liquid-1 {
0% {
height: 0;
opacity: 0;
top: -0.5rem;
}
22% {
height: 0.28125rem;
top: 0.375rem;
opacity: 1;
}
25% {
top: -0.25rem;
}
35% {
height: 2.125rem;
top: -0.5rem;
}
55% {
height: 0.28125rem;
top: -0.125rem;
}
60% {
height: 0.61875rem;
opacity: 1;
top: -0.275rem;
}
96% {
height: 1.84375rem;
opacity: 0;
top: 0.5rem;
}
100% {
height: 0;
opacity: 0;
}
}
@-moz-keyframes cssload-liquid-1 {
0% {
height: 0;
opacity: 0;
top: -0.5rem;
}
22% {
height: 0.28125rem;
top: 0.375rem;
opacity: 1;
}
25% {
top: -0.25rem;
}
35% {
height: 2.125rem;
top: -0.5rem;
}
55% {
height: 0.28125rem;
top: -0.125rem;
}
60% {
height: 0.61875rem;
opacity: 1;
top: -0.275rem;
}
96% {
height: 1.84375rem;
opacity: 0;
top: 0.5rem;
}
100% {
height: 0;
opacity: 0;
}
}
@keyframes cssload-liquid-2 {
0% {
height: 0;
opacity: 0;
top: -0.5rem;
}
17.5% {
height: 0.28125rem;
top: 0.2rem;
opacity: 1;
}
20% {
top: -0.25rem;
}
25% {
height: 2.40625rem;
top: -0.625rem;
}
45% {
height: 0.28125rem;
top: -0.125rem;
}
60% {
height: 2.40625rem;
opacity: 1;
top: -0.5rem;
}
96% {
height: 1.84375rem;
opacity: 0;
top: 0.5rem;
}
100% {
height: 0;
opacity: 0;
}
}
@-o-keyframes cssload-liquid-2 {
0% {
height: 0;
opacity: 0;
top: -0.5rem;
}
17.5% {
height: 0.28125rem;
top: 0.2rem;
opacity: 1;
}
20% {
top: -0.25rem;
}
25% {
height: 2.40625rem;
top: -0.625rem;
}
45% {
height: 0.28125rem;
top: -0.125rem;
}
60% {
height: 2.40625rem;
opacity: 1;
top: -0.5rem;
}
96% {
height: 1.84375rem;
opacity: 0;
top: 0.5rem;
}
100% {
height: 0;
opacity: 0;
}
}
@-ms-keyframes cssload-liquid-2 {
0% {
height: 0;
opacity: 0;
top: -0.5rem;
}
17.5% {
height: 0.28125rem;
top: 0.2rem;
opacity: 1;
}
20% {
top: -0.25rem;
}
25% {
height: 2.40625rem;
top: -0.625rem;
}
45% {
height: 0.28125rem;
top: -0.125rem;
}
60% {
height: 2.40625rem;
opacity: 1;
top: -0.5rem;
}
96% {
height: 1.84375rem;
opacity: 0;
top: 0.5rem;
}
100% {
height: 0;
opacity: 0;
}
}
@-webkit-keyframes cssload-liquid-2 {
0% {
height: 0;
opacity: 0;
top: -0.5rem;
}
17.5% {
height: 0.28125rem;
top: 0.2rem;
opacity: 1;
}
20% {
top: -0.25rem;
}
25% {
height: 2.40625rem;
top: -0.625rem;
}
45% {
height: 0.28125rem;
top: -0.125rem;
}
60% {
height: 2.40625rem;
opacity: 1;
top: -0.5rem;
}
96% {
height: 1.84375rem;
opacity: 0;
top: 0.5rem;
}
100% {
height: 0;
opacity: 0;
}
}
@-moz-keyframes cssload-liquid-2 {
0% {
height: 0;
opacity: 0;
top: -0.5rem;
}
17.5% {
height: 0.28125rem;
top: 0.2rem;
opacity: 1;
}
20% {
top: -0.25rem;
}
25% {
height: 2.40625rem;
top: -0.625rem;
}
45% {
height: 0.28125rem;
top: -0.125rem;
}
60% {
height: 2.40625rem;
opacity: 1;
top: -0.5rem;
}
96% {
height: 1.84375rem;
opacity: 0;
top: 0.5rem;
}
100% {
height: 0;
opacity: 0;
}
}