self-hosted/Sonarr
1
0
Fork 0
mirror of https://github.com/Sonarr/Sonarr.git synced 2024-12-16 11:37:58 +02:00
Code Issues Releases Activity

updated spinner

Browse Source
This commit is contained in:
kay.one 2013-06-30 00:47:02 -07:00
parent 00bb73a423
commit 57ccc51393
3 changed files with 105 additions and 99 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
UI/Content/prefixer.less
View File

@ -73,48 +73,56 @@
-moz-animation: @args; -moz-animation: @args;
-ms-animation: @args; -ms-animation: @args;
-o-animation: @args; -o-animation: @args;
animation: @args;
} }
.animation-delay(@delay) { .animation-delay(@delay) {
-webkit-animation-delay: @delay; -webkit-animation-delay: @delay;
-moz-animation-delay: @delay; -moz-animation-delay: @delay;
-ms-animation-delay: @delay; -ms-animation-delay: @delay;
-o-animation-delay: @delay; -o-animation-delay: @delay;
animation-delay: @delay;
} }
.animation-direction(@direction) { .animation-direction(@direction) {
-webkit-animation-direction: @direction; -webkit-animation-direction: @direction;
-moz-animation-direction: @direction; -moz-animation-direction: @direction;
-ms-animation-direction: @direction; -ms-animation-direction: @direction;
-o-animation-direction: @direction; -o-animation-direction: @direction;
animation-direction: @direction;
} }
.animation-duration(@duration) { .animation-duration(@duration) {
-webkit-animation-duration: @duration; -webkit-animation-duration: @duration;
-moz-animation-duration: @duration; -moz-animation-duration: @duration;
-ms-animation-duration: @duration; -ms-animation-duration: @duration;
-o-animation-duration: @duration; -o-animation-duration: @duration;
animation-duration: @duration;
} }
.animation-iteration-count(@count) { .animation-iteration-count(@count) {
-webkit-animation-iteration-count: @count; -webkit-animation-iteration-count: @count;
-moz-animation-iteration-count: @count; -moz-animation-iteration-count: @count;
-ms-animation-iteration-count: @count; -ms-animation-iteration-count: @count;
-o-animation-iteration-count: @count; -o-animation-iteration-count: @count;
animation-iteration-count: @count;
} }
.animation-name(@name) { .animation-name(@name) {
-webkit-animation-name: @name; -webkit-animation-name: @name;
-moz-animation-name: @name; -moz-animation-name: @name;
-ms-animation-name: @name; -ms-animation-name: @name;
-o-animation-name: @name; -o-animation-name: @name;
animation-name: @name;
} }
.animation-play-state(@state) { .animation-play-state(@state) {
-webkit-animation-play-state: @state; -webkit-animation-play-state: @state;
-moz-animation-play-state: @state; -moz-animation-play-state: @state;
-ms-animation-play-state: @state; -ms-animation-play-state: @state;
-o-animation-play-state: @state; -o-animation-play-state: @state;
animation-play-state: @state;
} }
.animation-timing-function(@function) { .animation-timing-function(@function) {
-webkit-animation-timing-function: @function; -webkit-animation-timing-function: @function;
-moz-animation-timing-function: @function; -moz-animation-timing-function: @function;
-ms-animation-timing-function: @function; -ms-animation-timing-function: @function;
-o-animation-timing-function: @function; -o-animation-timing-function: @function;
animation-timing-function: @function;
} }

188
UI/Content/spinner.less
View File

@ -10,123 +10,121 @@
width : 256px; width : 256px;
margin : 50px auto; margin : 50px auto;
display : block; display : block;
}
.followingBalls { .ball {
background-color : @colorDark;
position : absolute;
top : 0;
left : 0;
width : 20px;
height : 20px;
.border-radius(10px);
.animation-name(bounce_followingBallsG);
.animation-duration(1.9s);
.animation-iteration-count(infinite);
.animation-direction(linear);
}
#followingBallsG_1 {
.animation-delay(0s);
}
#followingBallsG_2 {
.animation-delay(0.19s);
}
#followingBallsG_3 {
.animation-delay(0.38s);
}
#followingBallsG_4 {
.animation-delay(0.57s);
}
@-moz-keyframes bounce_followingBallsG {
0% {
left : 0px;
background-color : @colorDark; background-color : @colorDark;
position : absolute;
top : 0;
left : 0;
width : 20px;
height : 20px;
.border-radius(10px);
.animation-name(bounce);
.animation-duration(1.9s);
.animation-iteration-count(infinite);
.animation-direction(linear);
} }
50% { #ball-1 {
left : 236px; .animation-delay(0s);
background-color : @colorLight;
} }
100% { #ball-2 {
left : 0px; .animation-delay(0.19s);
background-color : @colorDark;
} }
} #ball-3 {
.animation-delay(0.38s);
@-webkit-keyframes bounce_followingBallsG {
0% {
left : 0px;
background-color : @colorDark;
} }
50% { #ball-4 {
left : 236px; .animation-delay(0.57s);
background-color : @colorLight;
} }
100% { @keyframes bounce {
left : 0px; 0% {
background-color : @colorDark; 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;
}
50% {
left : 236px;
background-color : @colorLight;
}
100% {
left : 0px;
background-color : @colorDark;
}
@-ms-keyframes bounce_followingBallsG {
0% {
left : 0px;
background-color : @colorDark;
} }
50% { @-webkit-keyframes bounce {
left : 236px; 0% {
background-color : @colorLight; left : 0px;
background-color : @colorDark;
}
50% {
left : 236px;
background-color : @colorLight;
}
100% {
left : 0px;
background-color : @colorDark;
}
} }
100% { @-ms-keyframes bounce {
left : 0px; 0% {
background-color : @colorDark; left : 0px;
background-color : @colorDark;
}
50% {
left : 236px;
background-color : @colorLight;
}
100% {
left : 0px;
background-color : @colorDark;
}
} }
} @-o-keyframes bounce {
0% {
left : 0px;
background-color : @colorDark;
}
@-o-keyframes bounce_followingBallsG { 50% {
0% { left : 236px;
left : 0px; background-color : @colorLight;
background-color : @colorDark; }
}
50% { 100% {
left : 236px; left : 0px;
background-color : @colorLight; background-color : @colorDark;
} }
100% {
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;
} }
} }

8
UI/Shared/SpinnerTemplate.html
View File

@ -1,8 +1,8 @@
<div class="row"> <div class="row">
<div id="followingBalls"> <div id="followingBalls">
<div id="followingBallsG_1" class="followingBalls"></div> <div id="ball-1" class="ball"></div>
<div id="followingBallsG_2" class="followingBalls"></div> <div id="ball-2" class="ball"></div>
<div id="followingBallsG_3" class="followingBalls"></div> <div id="ball-3" class="ball"></div>
<div id="followingBallsG_4" class="followingBalls"></div> <div id="ball-4" class="ball"></div>
</div> </div>
</div> </div>