mirror of
https://github.com/Foundry376/Mailspring.git
synced 2024-09-22 00:06:06 +08:00
62 lines
1 KiB
Plaintext
62 lines
1 KiB
Plaintext
@import "ui-variables";
|
|
|
|
.spinner {
|
|
margin: 0;
|
|
width: 94px;
|
|
text-align: center;
|
|
opacity: 1;
|
|
transition: opacity 0.2s linear;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.spinner.hidden {
|
|
opacity: 0;
|
|
}
|
|
.spinner.paused {
|
|
> div {
|
|
// important. animating with opacity 0 chews up about 5% cpu
|
|
animation-play-state: paused;
|
|
}
|
|
}
|
|
|
|
.spinner-cover {
|
|
&.hidden {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
.spinner > div {
|
|
width: 14px;
|
|
height: 14px;
|
|
|
|
border-radius: 100%;
|
|
border: 1px solid @gray-light;
|
|
display: inline-block;
|
|
animation: bouncedelay 1.1s infinite cubic-bezier(0.45, 0.05, 0.55, 0.95);
|
|
/* Prevent first frame from flickering when animation starts */
|
|
animation-fill-mode: both;
|
|
margin-right:4px;
|
|
margin-left:4px;
|
|
}
|
|
|
|
.spinner .bounce1 {
|
|
animation-delay: -0.34s;
|
|
}
|
|
.spinner .bounce2 {
|
|
animation-delay: -0.22s;
|
|
}
|
|
.spinner .bounce3 {
|
|
animation-delay: -0.12s;
|
|
}
|
|
.spinner .bounce4 {
|
|
animation-delay: 0s;
|
|
}
|
|
|
|
@keyframes bouncedelay {
|
|
0%, 80%, 100% {
|
|
transform: scale(0.0);
|
|
} 40% {
|
|
transform: scale(1.0);
|
|
}
|
|
}
|