SOURCE

<section class="loading">
    <div>.</div>
    <div>.</div>
    <div>.</div>
    <div>L</div>
    <div>0</div>
    <div>A</div>
    <div>D</div>
    <div>I</div>
    <div>N</div>
    <div>G</div>
    <div>.</div>
    <div>.</div>
    <div>.</div>
</section>

    *{
        margin: 0;
        padding: 0;
    }
    .loading {
        overflow: hidden;
        text-align: center;
        width: 100%;
        position: absolute;
        top: 50%;
        margin-top: -15px;
        height: 30px;
        line-height: 30px;
    }
    body{
        background: #000;
    }
    .loading div {
        position: relative;
        animation: bounce 1.5s infinite ease-in-out;
        display: inline-block;
        color: #fbf187;
        font-size: 14px;
        vertical-align: middle;
    }

    .loading div:nth-child(1) {
        animation: bouncefirst 1.5s infinite ease-in-out;
        animation-delay: 0ms;
    }
    .loading div:nth-child(2) {
        animation-delay: 50ms;
    }
    .loading div:nth-child(3) {
        animation-delay: 100ms;
    }
    .loading div:nth-child(4) {
        animation-delay: 150ms;

    }
    .loading div:nth-child(5) {
        animation-delay: 200ms;
    }
    .loading div:nth-child(6) {
        animation-delay: 250ms;
    }
    .loading div:nth-child(7) {
        animation-delay: 300ms;
    }
    .loading div:nth-child(8) {
        animation-delay: 350ms;
    }
    .loading div:nth-child(9) {
        animation-delay: 400ms;
    }
    .loading div:nth-child(10) {

        animation-delay: 450ms;
    }
    .loading div:nth-child(11) {
        animation-delay: 500ms;
    }
    .loading div:nth-child(12) {
        animation-delay: 550ms;
    }
    .loading div:nth-child(13) {
        animation-delay: 600ms;
    }
    .loading div:nth-child(13) {
        animation-delay: 650ms;
    }

    @keyframes bouncefirst {
        0% { transform: translateX(0px); }
        20% { transform: translateX(-20px); }
        25% { transform: translateX(-20px); }
        50% { transform: translateX(20px); }
        80%,100% { transform: translateX(0px); }
    }

    @keyframes bounce {
        0% { transform: translateX(0px); }
        20% { transform: translateX(0px); }
        28% { transform: translateX(0px); }
        50% { transform: translateX(20px); }
        80%,100% { transform: translateX(0px); }
    }