Foundry376/Mailspring
1
1
Fork 0
mirror of https://github.com/Foundry376/Mailspring.git synced 2025-10-08 20:26:20 +08:00
Code Issues Projects Releases Packages Wiki Activity

fix(spinner): Improve loading indicator style / tweening

Browse source
This commit is contained in:
Ben Gotow 2015-12-09 13:34:39 -08:00
parent 0187d92f25
commit c39edccb32
2 changed files with 13 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
src/components/spinner.cjsx
View file

@ -109,6 +109,7 @@ class Spinner extends React.Component
<div className="bounce1"></div> <div className="bounce1"></div>
<div className="bounce2"></div> <div className="bounce2"></div>
<div className="bounce3"></div> <div className="bounce3"></div>
<div className="bounce4"></div>
</div> </div>
module.exports = Spinner module.exports = Spinner

31
static/components/spinner.less
View file

@ -5,7 +5,7 @@
width: 94px; width: 94px;
text-align: center; text-align: center;
opacity: 1; opacity: 1;
-webkit-transition: opacity 0.2s linear; //transition transition: opacity 0.2s linear;
pointer-events: none; pointer-events: none;
} }
@ -15,7 +15,6 @@
.spinner.paused { .spinner.paused {
> div { > div {
// important. animating with opacity 0 chews up about 5% cpu // important. animating with opacity 0 chews up about 5% cpu
-webkit-animation-play-state: paused;
animation-play-state: paused; animation-play-state: paused;
} }
} }
@ -27,42 +26,36 @@
} }
.spinner > div { .spinner > div {
width: 18px; width: 14px;
height: 18px; height: 14px;
background-color: @gray-light;
border-radius: 100%; border-radius: 100%;
border: 1px solid @gray-light;
display: inline-block; display: inline-block;
-webkit-animation: bouncedelay 1.2s infinite ease-in-out; animation: bouncedelay 1.1s infinite cubic-bezier(0.45, 0.05, 0.55, 0.95);
animation: bouncedelay 1.2s infinite ease-in-out;
/* Prevent first frame from flickering when animation starts */ /* Prevent first frame from flickering when animation starts */
-webkit-animation-fill-mode: both;
animation-fill-mode: both; animation-fill-mode: both;
margin-right:4px; margin-right:4px;
margin-left:4px; margin-left:4px;
} }
.spinner .bounce1 { .spinner .bounce1 {
-webkit-animation-delay: -0.32s; animation-delay: -0.34s;
animation-delay: -0.32s;
} }
.spinner .bounce2 { .spinner .bounce2 {
-webkit-animation-delay: -0.16s; animation-delay: -0.22s;
animation-delay: -0.16s;
} }
.spinner .bounce3 {
@-webkit-keyframes bouncedelay { animation-delay: -0.12s;
0%, 80%, 100% { -webkit-transform: scale(0.0) } }
40% { -webkit-transform: scale(1.0) } .spinner .bounce4 {
animation-delay: 0s;
} }
@keyframes bouncedelay { @keyframes bouncedelay {
0%, 80%, 100% { 0%, 80%, 100% {
transform: scale(0.0); transform: scale(0.0);
-webkit-transform: scale(0.0);
} 40% { } 40% {
transform: scale(1.0); transform: scale(1.0);
-webkit-transform: scale(1.0);
} }
} }