xueli.xue
9 years ago
parent
a06d75363e
commit
e58f77ddee
11 changed files with 330 additions and 30 deletions
@ -1,3 +1,4 @@ |
||||
/.settings/ |
||||
/.project |
||||
/xxl-job.iml |
||||
/.idea |
||||
|
||||
@ -1,18 +0,0 @@ |
||||
/* This is a compiled file, you should be editing the file in the templates directory */ |
||||
.pace .pace-progress { |
||||
background: #22df80; |
||||
position: fixed; |
||||
z-index: 2000; |
||||
top: 0; |
||||
left: 0; |
||||
height: 2px; |
||||
|
||||
-webkit-transition: width 1s; |
||||
-moz-transition: width 1s; |
||||
-o-transition: width 1s; |
||||
transition: width 1s; |
||||
} |
||||
|
||||
.pace-inactive { |
||||
display: none; |
||||
} |
||||
@ -0,0 +1,231 @@ |
||||
/* This is a compiled file, you should be editing the file in the templates directory */ |
||||
.pace { |
||||
width: 140px; |
||||
height: 300px; |
||||
position: fixed; |
||||
top: -90px; |
||||
right: -20px; |
||||
z-index: 2000; |
||||
-webkit-transform: scale(0); |
||||
-moz-transform: scale(0); |
||||
-ms-transform: scale(0); |
||||
-o-transform: scale(0); |
||||
transform: scale(0); |
||||
opacity: 0; |
||||
-webkit-transition: all 2s linear 0s; |
||||
-moz-transition: all 2s linear 0s; |
||||
transition: all 2s linear 0s; |
||||
} |
||||
|
||||
.pace.pace-active { |
||||
-webkit-transform: scale(.25); |
||||
-moz-transform: scale(.25); |
||||
-ms-transform: scale(.25); |
||||
-o-transform: scale(.25); |
||||
transform: scale(.25); |
||||
opacity: 1; |
||||
} |
||||
|
||||
.pace .pace-activity { |
||||
width: 140px; |
||||
height: 140px; |
||||
border-radius: 70px; |
||||
background: #29d; |
||||
position: absolute; |
||||
top: 0; |
||||
z-index: 1911; |
||||
-webkit-animation: pace-bounce 1s infinite; |
||||
-moz-animation: pace-bounce 1s infinite; |
||||
-o-animation: pace-bounce 1s infinite; |
||||
-ms-animation: pace-bounce 1s infinite; |
||||
animation: pace-bounce 1s infinite; |
||||
} |
||||
|
||||
.pace .pace-progress { |
||||
position: absolute; |
||||
display: block; |
||||
left: 50%; |
||||
bottom: 0; |
||||
z-index: 1910; |
||||
margin-left: -30px; |
||||
width: 60px; |
||||
height: 75px; |
||||
background: rgba(20, 20, 20, .1); |
||||
box-shadow: 0 0 20px 35px rgba(20, 20, 20, .1); |
||||
border-radius: 30px / 40px; |
||||
-webkit-transform: scaleY(.3); |
||||
-moz-transform: scaleY(.3); |
||||
-ms-transform: scaleY(.3); |
||||
-o-transform: scaleY(.3); |
||||
transform: scaleY(.3); |
||||
-webkit-animation: pace-compress .5s infinite alternate; |
||||
-moz-animation: pace-compress .5s infinite alternate; |
||||
-o-animation: pace-compress .5s infinite alternate; |
||||
-ms-animation: pace-compress .5s infinite alternate; |
||||
animation: pace-compress .5s infinite alternate; |
||||
} |
||||
|
||||
@-webkit-keyframes pace-bounce { |
||||
0% { |
||||
top: 0; |
||||
-webkit-animation-timing-function: ease-in; |
||||
} |
||||
40% {} |
||||
50% { |
||||
top: 140px; |
||||
height: 140px; |
||||
-webkit-animation-timing-function: ease-out; |
||||
} |
||||
55% { |
||||
top: 160px; |
||||
height: 120px; |
||||
border-radius: 70px / 60px; |
||||
-webkit-animation-timing-function: ease-in; |
||||
} |
||||
65% { |
||||
top: 120px; |
||||
height: 140px; |
||||
border-radius: 70px; |
||||
-webkit-animation-timing-function: ease-out; |
||||
} |
||||
95% { |
||||
top: 0; |
||||
-webkit-animation-timing-function: ease-in; |
||||
} |
||||
100% { |
||||
top: 0; |
||||
-webkit-animation-timing-function: ease-in; |
||||
} |
||||
} |
||||
|
||||
@-moz-keyframes pace-bounce { |
||||
0% { |
||||
top: 0; |
||||
-moz-animation-timing-function: ease-in; |
||||
} |
||||
40% {} |
||||
50% { |
||||
top: 140px; |
||||
height: 140px; |
||||
-moz-animation-timing-function: ease-out; |
||||
} |
||||
55% { |
||||
top: 160px; |
||||
height: 120px; |
||||
border-radius: 70px / 60px; |
||||
-moz-animation-timing-function: ease-in; |
||||
} |
||||
65% { |
||||
top: 120px; |
||||
height: 140px; |
||||
border-radius: 70px; |
||||
-moz-animation-timing-function: ease-out;} |
||||
95% { |
||||
top: 0; |
||||
-moz-animation-timing-function: ease-in; |
||||
} |
||||
100% {top: 0; |
||||
-moz-animation-timing-function: ease-in; |
||||
} |
||||
} |
||||
|
||||
@keyframes pace-bounce { |
||||
0% { |
||||
top: 0; |
||||
animation-timing-function: ease-in; |
||||
} |
||||
50% { |
||||
top: 140px; |
||||
height: 140px; |
||||
animation-timing-function: ease-out; |
||||
} |
||||
55% { |
||||
top: 160px; |
||||
height: 120px; |
||||
border-radius: 70px / 60px; |
||||
animation-timing-function: ease-in; |
||||
} |
||||
65% { |
||||
top: 120px; |
||||
height: 140px; |
||||
border-radius: 70px; |
||||
animation-timing-function: ease-out; |
||||
} |
||||
95% { |
||||
top: 0; |
||||
animation-timing-function: ease-in; |
||||
} |
||||
100% { |
||||
top: 0; |
||||
animation-timing-function: ease-in; |
||||
} |
||||
} |
||||
|
||||
@-webkit-keyframes pace-compress { |
||||
0% { |
||||
bottom: 0; |
||||
margin-left: -30px; |
||||
width: 60px; |
||||
height: 75px; |
||||
background: rgba(20, 20, 20, .1); |
||||
box-shadow: 0 0 20px 35px rgba(20, 20, 20, .1); |
||||
border-radius: 30px / 40px; |
||||
-webkit-animation-timing-function: ease-in; |
||||
} |
||||
100% { |
||||
bottom: 30px; |
||||
margin-left: -10px; |
||||
width: 20px; |
||||
height: 5px; |
||||
background: rgba(20, 20, 20, .3); |
||||
box-shadow: 0 0 20px 35px rgba(20, 20, 20, .3); |
||||
border-radius: 20px / 20px; |
||||
-webkit-animation-timing-function: ease-out; |
||||
} |
||||
} |
||||
|
||||
@-moz-keyframes pace-compress { |
||||
0% { |
||||
bottom: 0; |
||||
margin-left: -30px; |
||||
width: 60px; |
||||
height: 75px; |
||||
background: rgba(20, 20, 20, .1); |
||||
box-shadow: 0 0 20px 35px rgba(20, 20, 20, .1); |
||||
border-radius: 30px / 40px; |
||||
-moz-animation-timing-function: ease-in; |
||||
} |
||||
100% { |
||||
bottom: 30px; |
||||
margin-left: -10px; |
||||
width: 20px; |
||||
height: 5px; |
||||
background: rgba(20, 20, 20, .3); |
||||
box-shadow: 0 0 20px 35px rgba(20, 20, 20, .3); |
||||
border-radius: 20px / 20px; |
||||
-moz-animation-timing-function: ease-out; |
||||
} |
||||
} |
||||
|
||||
@keyframes pace-compress { |
||||
0% { |
||||
bottom: 0; |
||||
margin-left: -30px; |
||||
width: 60px; |
||||
height: 75px; |
||||
background: rgba(20, 20, 20, .1); |
||||
box-shadow: 0 0 20px 35px rgba(20, 20, 20, .1); |
||||
border-radius: 30px / 40px; |
||||
animation-timing-function: ease-in; |
||||
} |
||||
100% { |
||||
bottom: 30px; |
||||
margin-left: -10px; |
||||
width: 20px; |
||||
height: 5px; |
||||
background: rgba(20, 20, 20, .3); |
||||
box-shadow: 0 0 20px 35px rgba(20, 20, 20, .3); |
||||
border-radius: 20px / 20px; |
||||
animation-timing-function: ease-out; |
||||
} |
||||
} |
||||
@ -0,0 +1,81 @@ |
||||
/* This is a compiled file, you should be editing the file in the templates directory */ |
||||
.pace { |
||||
-webkit-pointer-events: none; |
||||
pointer-events: none; |
||||
-webkit-user-select: none; |
||||
-moz-user-select: none; |
||||
user-select: none; |
||||
} |
||||
|
||||
.pace-inactive { |
||||
display: none; |
||||
} |
||||
|
||||
.pace .pace-progress { |
||||
background: #29d; |
||||
position: fixed; |
||||
z-index: 2000; |
||||
top: 0; |
||||
left: 0; |
||||
height: 2px; |
||||
|
||||
-webkit-transition: width 1s; |
||||
-moz-transition: width 1s; |
||||
-o-transition: width 1s; |
||||
transition: width 1s; |
||||
} |
||||
|
||||
.pace .pace-progress-inner { |
||||
display: block; |
||||
position: absolute; |
||||
right: 0px; |
||||
width: 100px; |
||||
height: 100%; |
||||
box-shadow: 0 0 10px #29d, 0 0 5px #29d; |
||||
opacity: 1.0; |
||||
-webkit-transform: rotate(3deg) translate(0px, -4px); |
||||
-moz-transform: rotate(3deg) translate(0px, -4px); |
||||
-ms-transform: rotate(3deg) translate(0px, -4px); |
||||
-o-transform: rotate(3deg) translate(0px, -4px); |
||||
transform: rotate(3deg) translate(0px, -4px); |
||||
} |
||||
|
||||
.pace .pace-activity { |
||||
display: block; |
||||
position: fixed; |
||||
z-index: 2000; |
||||
top: 15px; |
||||
right: 15px; |
||||
width: 14px; |
||||
height: 14px; |
||||
border: solid 2px transparent; |
||||
border-top-color: #29d; |
||||
border-left-color: #29d; |
||||
border-radius: 10px; |
||||
-webkit-animation: pace-spinner 400ms linear infinite; |
||||
-moz-animation: pace-spinner 400ms linear infinite; |
||||
-ms-animation: pace-spinner 400ms linear infinite; |
||||
-o-animation: pace-spinner 400ms linear infinite; |
||||
animation: pace-spinner 400ms linear infinite; |
||||
} |
||||
|
||||
@-webkit-keyframes pace-spinner { |
||||
0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } |
||||
100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } |
||||
} |
||||
@-moz-keyframes pace-spinner { |
||||
0% { -moz-transform: rotate(0deg); transform: rotate(0deg); } |
||||
100% { -moz-transform: rotate(360deg); transform: rotate(360deg); } |
||||
} |
||||
@-o-keyframes pace-spinner { |
||||
0% { -o-transform: rotate(0deg); transform: rotate(0deg); } |
||||
100% { -o-transform: rotate(360deg); transform: rotate(360deg); } |
||||
} |
||||
@-ms-keyframes pace-spinner { |
||||
0% { -ms-transform: rotate(0deg); transform: rotate(0deg); } |
||||
100% { -ms-transform: rotate(360deg); transform: rotate(360deg); } |
||||
} |
||||
@keyframes pace-spinner { |
||||
0% { transform: rotate(0deg); transform: rotate(0deg); } |
||||
100% { transform: rotate(360deg); transform: rotate(360deg); } |
||||
} |
||||
Loading…
Reference in new issue