Sha256: 5d20b8a6d5572202b5745333a555eea554bb4c61ff7739e7bcdafb03a2adcd07
Contents?: true
Size: 1.82 KB
Versions: 12
Compression:
Stored size: 1.82 KB
Contents
.loaderContainer {
margin-top: 250px;
}
.loader {
position: relative;
width: 44px;
height: 8px;
margin: 12px auto;
}
.dot {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 4px;
background: #ccc;
position: absolute;
}
.dot_1 {
animation: animateDot1 1.5s linear infinite;
left: 12px;
background: #e579b8;
}
.dot_2 {
animation: animateDot2 1.5s linear infinite;
animation-delay: 0.5s;
left: 24px;
}
.dot_3 {
animation: animateDot3 1.5s linear infinite;
left: 12px;
}
.dot_4 {
animation: animateDot4 1.5s linear infinite;
animation-delay: 0.5s;
left: 24px;
}
@keyframes animateDot1 {
0% {
transform: rotate(0deg) translateX(-12px);
}
25% {
transform: rotate(180deg) translateX(-12px);
}
75% {
transform: rotate(180deg) translateX(-12px);
}
100% {
transform: rotate(360deg) translateX(-12px);
}
}
@keyframes animateDot2 {
0% {
transform: rotate(0deg) translateX(-12px);
}
25% {
transform: rotate(-180deg) translateX(-12px);
}
75% {
transform: rotate(-180deg) translateX(-12px);
}
100% {
transform: rotate(-360deg) translateX(-12px);
}
}
@keyframes animateDot3 {
0% {
transform: rotate(0deg) translateX(12px);
}
25% {
transform: rotate(180deg) translateX(12px);
}
75% {
transform: rotate(180deg) translateX(12px);
}
100% {
transform: rotate(360deg) translateX(12px);
}
}
@keyframes animateDot4 {
0% {
transform: rotate(0deg) translateX(12px);
}
25% {
transform: rotate(-180deg) translateX(12px);
}
75% {
transform: rotate(-180deg) translateX(12px);
}
100% {
transform: rotate(-360deg) translateX(12px);
}
}
Version data entries
12 entries across 12 versions & 1 rubygems