mirror/Sonarr
1
0
Fork 0
mirror of https://github.com/Sonarr/Sonarr synced 2024-12-25 17:27:18 +00:00
Code Issues Releases Wiki Activity

updated spinner view to use CSS3 instead of spinning font.

Browse source
This commit is contained in:
kay.one 2013-06-29 15:07:09 -07:00
parent 2b2bd23065
commit 00bb73a423
4 changed files with 145 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
UI/Content/base.less
View file

@ -9,6 +9,7 @@
@import "../shared/styles/clickable";
@import "prefixer";
@import "icons";
@import "spinner";
.progress {
width : 125px;
@ -61,11 +62,6 @@
padding : 30px;
}
.nz-spinner {
.text-center;
font-size : 56px;
padding : 30px;
}
.page-toolbar {
margin-top : 10px;
@ -94,6 +90,6 @@
}
.label-large {
padding: 4px 6px;
font-size: 16px;
}
padding : 4px 6px;
font-size : 16px;
}

132
UI/Content/spinner.less Normal file
View file

@ -0,0 +1,132 @@
@import "prefixer";
@import "bootstrap/variables";
@colorDark : @grayDark;
@colorLight : @grayLighter;
#followingBalls {
position : relative;
height : 20px;
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;
background-color : @colorDark;
}
50% {
left : 236px;
background-color : @colorLight;
}
100% {
left : 0px;
background-color : @colorDark;
}
}
@-webkit-keyframes bounce_followingBallsG {
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;
}
100% {
left : 0px;
background-color : @colorDark;
}
}
@-o-keyframes bounce_followingBallsG {
0% {
left : 0px;
background-color : @colorDark;
}
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;
}
}

9
UI/Shared/SpinnerTemplate.html
View file

@ -1 +1,8 @@
<i class="icon-spinner icon-spin"/>
<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>
</div>

3
UI/Shared/SpinnerView.js
View file

@ -1,4 +1,4 @@
'use strict';
'use strict';
define(
[
@ -6,7 +6,6 @@ define(
], function (Marionette) {
return Marionette.ItemView.extend({
template : 'Shared/SpinnerTemplate',
className: 'nz-spinner row'
});
});