<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);
    }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.