<h3 class="acl-typography--subtitle1">Dots</h3>
<div class="acl-loading-dots">
<div class="bounce1"></div>
<div class="bounce2"></div>
<div class="bounce3"></div>
</div>
<h3 class="acl-typography--subtitle1">Dots</h3>
<div class="acl-loading-dots">
<div class="bounce1"></div>
<div class="bounce2"></div>
<div class="bounce3"></div>
</div>
/* No context defined. */
.acl-loading-dots {
text-align: center;
& > div {
width: 7px;
height: 7px;
background-color: $teal;
border-radius: 100% !important;
display: inline-block;
-webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}
.bounce1 {
-webkit-animation-delay: -0.32s;
animation-delay: -0.32s;
}
.bounce2 {
-webkit-animation-delay: -0.16s;
animation-delay: -0.16s;
}
@-webkit-keyframes sk-bouncedelay {
0%,
80%,
100% {
-webkit-transform: scale(0);
}
40% {
-webkit-transform: scale(1);
}
}
@keyframes sk-bouncedelay {
0%,
80%,
100% {
-webkit-transform: scale(0);
transform: scale(0);
}
40% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
}
No notes defined.