diff --git a/UI/Content/prefixer.less b/UI/Content/prefixer.less index 4a6b8d6bc..04559cf3e 100644 --- a/UI/Content/prefixer.less +++ b/UI/Content/prefixer.less @@ -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; } diff --git a/UI/Content/spinner.less b/UI/Content/spinner.less index b06cc3c42..d5a762103 100644 --- a/UI/Content/spinner.less +++ b/UI/Content/spinner.less @@ -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; - } - - 100% { - left : 0px; - background-color : @colorDark; + #ball-1 { + .animation-delay(0s); } -} - -@-webkit-keyframes bounce_followingBallsG { - 0% { - left : 0px; - background-color : @colorDark; + #ball-2 { + .animation-delay(0.19s); } - 50% { - left : 236px; - background-color : @colorLight; + #ball-3 { + .animation-delay(0.38s); } - 100% { - left : 0px; - background-color : @colorDark; + #ball-4 { + .animation-delay(0.57s); } -} - -@-ms-keyframes bounce_followingBallsG { - 0% { - 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; + } } - 50% { - left : 236px; - background-color : @colorLight; - } + @-moz-keyframes bounce { + 0% { + left : 0px; + background-color : @colorDark; + } - 100% { - 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; - } + @-webkit-keyframes bounce { + 0% { + left : 0px; + background-color : @colorDark; + } - 100% { - 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; + @-ms-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; + @-o-keyframes bounce { + 0% { + left : 0px; + background-color : @colorDark; + } + + 50% { + left : 236px; + background-color : @colorLight; + } + + 100% { + left : 0px; + background-color : @colorDark; + } } } diff --git a/UI/Shared/SpinnerTemplate.html b/UI/Shared/SpinnerTemplate.html index 0f2eb6b6a..702dcaf07 100644 --- a/UI/Shared/SpinnerTemplate.html +++ b/UI/Shared/SpinnerTemplate.html @@ -1,8 +1,8 @@ 
-
-
-
-
+
+
+
+