mirror
/
Lidarr
mirror of https://github.com/lidarr/Lidarr
1
0
Fork 0
Code Issues Releases Wiki Activity

updated spinner

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;
-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;
}

188
UI/Content/spinner.less
View File

@ -10,123 +10,121 @@
width : 256px;
margin : 50px auto;
display : block;
}
.followingBalls {
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;
.ball {
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% {
left : 236px;
background-color : @colorLight;
#ball-1 {
.animation-delay(0s);
}
100% {
left : 0px;
background-color : @colorDark;
#ball-2 {
.animation-delay(0.19s);
}
}
@-webkit-keyframes bounce_followingBallsG {
0% {
left : 0px;
background-color : @colorDark;
#ball-3 {
.animation-delay(0.38s);
}
50% {
left : 236px;
background-color : @colorLight;
#ball-4 {
.animation-delay(0.57s);
}
100% {
left : 0px;
background-color : @colorDark;
@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;
}
50% {
left : 236px;
background-color : @colorLight;
}
100% {
left : 0px;
background-color : @colorDark;
}
@-ms-keyframes bounce_followingBallsG {
0% {
left : 0px;
background-color : @colorDark;
}
50% {
left : 236px;
background-color : @colorLight;
@-webkit-keyframes bounce {
0% {
left : 0px;
background-color : @colorDark;
}
50% {
left : 236px;
background-color : @colorLight;
}
100% {
left : 0px;
background-color : @colorDark;
}
}
100% {
left : 0px;
background-color : @colorDark;
@-ms-keyframes bounce {
0% {
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 {
0% {
left : 0px;
background-color : @colorDark;
}
50% {
left : 236px;
background-color : @colorLight;
}
50% {
left : 236px;
background-color : @colorLight;
}
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;
100% {
left : 0px;
background-color : @colorDark;
}
}
}

8
UI/Shared/SpinnerTemplate.html
View File

@ -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>