improve task loading icon performance

This commit is contained in:
Felix Niklas 2015-01-20 14:16:37 +01:00
parent b3e04d2361
commit 3b2ff7103a

View file

@ -1799,7 +1799,7 @@ ol.tabs li {
height: 30px; height: 30px;
background: hsl(339,80%,62%); background: hsl(339,80%,62%);
-webkit-animation: rotateplane 1.2s infinite ease-in-out; -webkit-animation: rotateplane 1.2s infinite ease-in-out;
animation: rotateplane 1.2s infinite ease-in-out; animation: rotateplane 1.2s infinite ease-in-out;
} }
.small.loading.icon { .small.loading.icon {
@ -1815,15 +1815,15 @@ ol.tabs li {
@keyframes rotateplane { @keyframes rotateplane {
0% { 0% {
transform: perspective(120px) rotateX(0deg) rotateY(0deg); transform: perspective(120px) rotateX(0deg) rotateY(0deg);
-webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg); -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg);
background: hsl(202,68%,54%); background: hsl(202,68%,54%);
} 50% { } 50% {
transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
-webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
background: hsl(145,51%,45%); background: hsl(145,51%,45%);
} 100% { } 100% {
transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
-webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
background: hsl(202,68%,54%); background: hsl(202,68%,54%);
} }
@ -2087,6 +2087,7 @@ footer {
.tasks-navigation .icon-holder { .tasks-navigation .icon-holder {
width: 30px; width: 30px;
position: relative;
} }
.tasks-navigation .icon-holder .icon { .tasks-navigation .icon-holder .icon {
@ -2097,7 +2098,11 @@ footer {
width: 10px; width: 10px;
height: 10px; height: 10px;
border-radius: 100%; border-radius: 100%;
position: relative; position: absolute;
left: 50%;
top: 50%;
margin: -6px 0 0 -5px;
&:after { &:after {
@extend .priority.icon:after; @extend .priority.icon:after;
} }