<div class="box-flex">
<div></div>
<div></div>
<div></div>
</div>
.box-flex{
position: relative;
top: 1rem;
left: 50%;
transform: translate(-4rem, 0);
width: 8rem;
height: 2rem;
display: flex;
justify-content: space-between;
align-items: center;
}
.box-flex div {
width: 2rem;
height: 2rem;
border-radius: 50%;
background: #545aa0;
animation: loader .6s infinite alternate;
}
.box-flex div:nth-child(2) {
animation-delay: .2s;
}
.box-flex div:nth-child(3) {
animation-delay: .4s;
}
@keyframes loader {
to {
opacity: 0.1;
transform: translate3d(0, -1rem, 0);
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.