react-spinkit
Version:
A collection of loading indicators animated with CSS for React
40 lines (34 loc) • 755 B
CSS
.sk-double-bounce {
width: 27px;
height: 27px;
position: relative;
}
.sk-double-bounce > div {
width: 100%;
height: 100%;
border-radius: 50%;
background-color: currentColor;
opacity: 0.6;
position: absolute;
top: 0;
left: 0;
-webkit-animation: sk-bounce 2.0s infinite ease-in-out;
animation: sk-bounce 2.0s infinite ease-in-out;
}
.sk-double-bounce > div:last-child {
-webkit-animation-delay: -1.0s;
animation-delay: -1.0s;
}
@-webkit-keyframes sk-bounce {
0%, 100% { -webkit-transform: scale(0.0) }
50% { -webkit-transform: scale(1.0) }
}
@keyframes sk-bounce {
0%, 100% {
transform: scale(0.0);
-webkit-transform: scale(0.0);
} 50% {
transform: scale(1.0);
-webkit-transform: scale(1.0);
}
}