Mailspring/static/components/spinner.less
Ben Gotow aad21317e5 feat(ui): Updates from March 17th mockups
Summary:
There are two known issues:
- toolbar is not draggable in some areas when in three-pane mode.
- archive button appears over very long subjects. Propose moving this button elsewhere.

WIP

WIP

Test Plan: Run tests

Reviewers: evan

Reviewed By: evan

Differential Revision: https://review.inboxapp.com/D1311
2015-03-18 18:21:04 -07:00

62 lines
No EOL
1.3 KiB
Text

@import "ui-variables";
.spinner {
margin: 0;
width: 94px;
text-align: center;
opacity: 1;
-webkit-transition: opacity 0.2s linear 0.3s; //transition in
}
.spinner.hidden {
opacity: 0;
-webkit-transition: opacity 0.2s linear; //transition out
}
.spinner.paused {
> div {
// important. animating with opacity 0 chews up about 5% cpu
-webkit-animation-play-state: paused;
animation-play-state: paused;
}
}
.spinner > div {
width: 18px;
height: 18px;
background-color: @gray-light;
border-radius: 100%;
display: inline-block;
-webkit-animation: bouncedelay 1.2s infinite ease-in-out;
animation: bouncedelay 1.2s infinite ease-in-out;
/* Prevent first frame from flickering when animation starts */
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
margin-right:4px;
margin-left:4px;
}
.spinner .bounce1 {
-webkit-animation-delay: -0.32s;
animation-delay: -0.32s;
}
.spinner .bounce2 {
-webkit-animation-delay: -0.16s;
animation-delay: -0.16s;
}
@-webkit-keyframes bouncedelay {
0%, 80%, 100% { -webkit-transform: scale(0.0) }
40% { -webkit-transform: scale(1.0) }
}
@keyframes bouncedelay {
0%, 80%, 100% {
transform: scale(0.0);
-webkit-transform: scale(0.0);
} 40% {
transform: scale(1.0);
-webkit-transform: scale(1.0);
}
}