• HTML
• CSS

HTML

<div class="loader">
    <span></span>
    <span></span>
    <span></span>
</div>

CSS

body
{
    margin:0;
    padding:0;
    background:#111;
}
.loader
{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:100%;
    height:10px;
    text-align:center;
}
.loader span
{
    width:10px;
    height:10px;
    background:#fff;
    display:inline-block;
    border-radius:50%;
    animation:animate 2s linear infinite;
}
.loader span:nth-child(1)
{
    animation-delay:0.8s;
    background:#00c2ff;
}
.loader span:nth-child(2)
{
    animation-delay:0.4s;
    background:#ffe837;
}
.loader span:nth-child(3)
{
    animation-delay:0s;
    background:#ff1b78;
}
@keyframes animate
{
    0%
    {
        transform:translateX(-100px);
        opacity:0;
    }
    10%
    {
        transform:translateX(-100px);
        opacity:0;
    }
    25%
    {
        transform:translateX(0px);
        opacity:1;
    }
    50%
    {
        transform:translateX(0px);
        opacity:1;
    }
    75%
    {
        transform:translateX(0px);
        opacity:1;
    }
    90%
    {
        transform:translateX(100px);
        opacity:0;
    }
    100%
    {
        transform:translateX(100px);
        opacity:0;
    }
}

/* Al the credits: https://www.youtube.com/watch?v=eg_gT5VRKio */