mirror of
https://github.com/Sonarr/Sonarr.git
synced 2024-12-16 11:37:58 +02:00
updated spinner
This commit is contained in:
parent
00bb73a423
commit
57ccc51393
@ -73,48 +73,56 @@
|
||||
-moz-animation: @args;
|
||||
-ms-animation: @args;
|
||||
-o-animation: @args;
|
||||
animation: @args;
|
||||
}
|
||||
.animation-delay(@delay) {
|
||||
-webkit-animation-delay: @delay;
|
||||
-moz-animation-delay: @delay;
|
||||
-ms-animation-delay: @delay;
|
||||
-o-animation-delay: @delay;
|
||||
animation-delay: @delay;
|
||||
}
|
||||
.animation-direction(@direction) {
|
||||
-webkit-animation-direction: @direction;
|
||||
-moz-animation-direction: @direction;
|
||||
-ms-animation-direction: @direction;
|
||||
-o-animation-direction: @direction;
|
||||
animation-direction: @direction;
|
||||
}
|
||||
.animation-duration(@duration) {
|
||||
-webkit-animation-duration: @duration;
|
||||
-moz-animation-duration: @duration;
|
||||
-ms-animation-duration: @duration;
|
||||
-o-animation-duration: @duration;
|
||||
animation-duration: @duration;
|
||||
}
|
||||
.animation-iteration-count(@count) {
|
||||
-webkit-animation-iteration-count: @count;
|
||||
-moz-animation-iteration-count: @count;
|
||||
-ms-animation-iteration-count: @count;
|
||||
-o-animation-iteration-count: @count;
|
||||
animation-iteration-count: @count;
|
||||
}
|
||||
.animation-name(@name) {
|
||||
-webkit-animation-name: @name;
|
||||
-moz-animation-name: @name;
|
||||
-ms-animation-name: @name;
|
||||
-o-animation-name: @name;
|
||||
animation-name: @name;
|
||||
}
|
||||
.animation-play-state(@state) {
|
||||
-webkit-animation-play-state: @state;
|
||||
-moz-animation-play-state: @state;
|
||||
-ms-animation-play-state: @state;
|
||||
-o-animation-play-state: @state;
|
||||
animation-play-state: @state;
|
||||
}
|
||||
.animation-timing-function(@function) {
|
||||
-webkit-animation-timing-function: @function;
|
||||
-moz-animation-timing-function: @function;
|
||||
-ms-animation-timing-function: @function;
|
||||
-o-animation-timing-function: @function;
|
||||
animation-timing-function: @function;
|
||||
}
|
||||
|
||||
|
||||
|
@ -10,9 +10,8 @@
|
||||
width : 256px;
|
||||
margin : 50px auto;
|
||||
display : block;
|
||||
}
|
||||
|
||||
.followingBalls {
|
||||
.ball {
|
||||
background-color : @colorDark;
|
||||
position : absolute;
|
||||
top : 0;
|
||||
@ -20,29 +19,46 @@
|
||||
width : 20px;
|
||||
height : 20px;
|
||||
.border-radius(10px);
|
||||
.animation-name(bounce_followingBallsG);
|
||||
.animation-name(bounce);
|
||||
.animation-duration(1.9s);
|
||||
.animation-iteration-count(infinite);
|
||||
.animation-direction(linear);
|
||||
}
|
||||
}
|
||||
|
||||
#followingBallsG_1 {
|
||||
#ball-1 {
|
||||
.animation-delay(0s);
|
||||
}
|
||||
}
|
||||
|
||||
#followingBallsG_2 {
|
||||
#ball-2 {
|
||||
.animation-delay(0.19s);
|
||||
}
|
||||
}
|
||||
|
||||
#followingBallsG_3 {
|
||||
#ball-3 {
|
||||
.animation-delay(0.38s);
|
||||
}
|
||||
}
|
||||
|
||||
#followingBallsG_4 {
|
||||
#ball-4 {
|
||||
.animation-delay(0.57s);
|
||||
}
|
||||
}
|
||||
|
||||
@-moz-keyframes bounce_followingBallsG {
|
||||
@keyframes bounce {
|
||||
0% {
|
||||
left : 0px;
|
||||
background-color : @colorDark;
|
||||
}
|
||||
|
||||
50% {
|
||||
left : 236px;
|
||||
background-color : @colorLight;
|
||||
}
|
||||
|
||||
100% {
|
||||
left : 0px;
|
||||
background-color : @colorDark;
|
||||
}
|
||||
}
|
||||
|
||||
@-moz-keyframes bounce {
|
||||
0% {
|
||||
left : 0px;
|
||||
background-color : @colorDark;
|
||||
@ -58,9 +74,9 @@
|
||||
background-color : @colorDark;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes bounce_followingBallsG {
|
||||
@-webkit-keyframes bounce {
|
||||
0% {
|
||||
left : 0px;
|
||||
background-color : @colorDark;
|
||||
@ -76,9 +92,9 @@
|
||||
background-color : @colorDark;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@-ms-keyframes bounce_followingBallsG {
|
||||
@-ms-keyframes bounce {
|
||||
0% {
|
||||
left : 0px;
|
||||
background-color : @colorDark;
|
||||
@ -93,10 +109,9 @@
|
||||
left : 0px;
|
||||
background-color : @colorDark;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@-o-keyframes bounce_followingBallsG {
|
||||
@-o-keyframes bounce {
|
||||
0% {
|
||||
left : 0px;
|
||||
background-color : @colorDark;
|
||||
@ -111,22 +126,5 @@
|
||||
left : 0px;
|
||||
background-color : @colorDark;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@keyframes bounce_followingBallsG {
|
||||
0% {
|
||||
left : 0px;
|
||||
background-color : @colorDark;
|
||||
}
|
||||
|
||||
50% {
|
||||
left : 236px;
|
||||
background-color : @colorLight;
|
||||
}
|
||||
|
||||
100% {
|
||||
left : 0px;
|
||||
background-color : @colorDark;
|
||||
}
|
||||
}
|
||||
|
@ -1,8 +1,8 @@
|
||||
<div class="row">
|
||||
<div id="followingBalls">
|
||||
<div id="followingBallsG_1" class="followingBalls"></div>
|
||||
<div id="followingBallsG_2" class="followingBalls"></div>
|
||||
<div id="followingBallsG_3" class="followingBalls"></div>
|
||||
<div id="followingBallsG_4" class="followingBalls"></div>
|
||||
<div id="ball-1" class="ball"></div>
|
||||
<div id="ball-2" class="ball"></div>
|
||||
<div id="ball-3" class="ball"></div>
|
||||
<div id="ball-4" class="ball"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
Loading…
Reference in New Issue
Block a user