Inline preloader

index.html

<div class='inline-preloader'>
  <div class='inline-preloader__bullet'></div>
  <div class='inline-preloader__bullet'></div>
  <div class='inline-preloader__bullet'></div>
</div>

inline-preloader.markdown

style.css

.inline-preloader__bullet {
    animation: inline-preloader-anim 0.8s ease-in-out 0s infinite;
    border-radius: 50%;
    background: #00D977;
    position: absolute;
    height: 5px;
    width: 5px;
    
    &:nth-child(2) {
        animation-delay: 0.15s;
    }
    &:nth-child(3) {
        animation-delay: 0.3s;
    }
}

@keyframes inline-preloader-anim {
    0% {
        opacity: 0;
        transform: translateX(0px);
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translateX(40px);
    }
}