@appearhere/bloom
Version:
Appear Here's pattern library and styleguide
47 lines (43 loc) • 926 B
CSS
.spinner {
width: 1em;
display: inline;
vertical-align: top;
width: 1em;
height: 1em;
line-height: inherit;
stroke: inherit;
fill: inherit;
vertical-align: middle;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
transform: translate3d(0,0,0);
}
.circle {
width: 0.3em;
height: 0.3em;
background-color: currentColor;
border-radius: 100%;
display: inline-block;
animation: bouncedelay 1.4s infinite ease-in-out both;
will-change: transform;
backface-visibility: hidden;
stroke: transparent;
fill: currentColor;
stroke-linecap: round;
transform-origin: center center;
}
.circle:nth-child(1) {
animation-delay: -0.32s;
}
.circle:nth-child(2) {
animation-delay: -0.16s;
}
@keyframes bouncedelay {
0%, 80%, 100% {
-webkit-transform: scale(0);
transform: scale(0);
} 40% {
-webkit-transform: scale(1.0);
transform: scale(1.0);
}
}