<div class="container">
    <style>
        svg {
        height: 0px;
        width: 0px;
        }

        @keyframes loader {
        50% {
            transform: translateY(-16px);
            background-color: #1b98e0;
        }
        }

        body {
        background-color: #13293d;
        margin: 0;
        }

        .loader {
        filter: url('#goo');
        width: 100px;
        margin: 0 auto;
        position: relative;
        top: 50vh;
        transform: translateY(-10px);
        }

        .loader > div {
        float: left;
        height: 20px;
        width: 20px;
        border-radius: 100%;
        background-color: #006494;
        animation: loader 0.8s infinite; /* Assuming $t was 0.8s */
        }

        /* Looping with for is not directly supported in CSS */
        .loader > div:nth-child(1) {
        animation-delay: 0s; /* Assuming $i = 1 and $d is calculated from $t */
        }

        .loader > div:nth-child(2) {
        animation-delay: 0.16s; /* Assuming calculated delay based on $t and $d */
        }

        .loader > div:nth-child(3) {
        animation-delay: 0.32s;
        }

        .loader > div:nth-child(4) {
        animation-delay: 0.48s;
        }

        .loader > div:nth-child(5) {
        animation-delay: 0.64s;
        }
    </style>

    <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <defs>
        <filter id="goo">
        <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />
        <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 35 -10" result="goo" />
        <feBlend in="SourceGraphic" in2="goo" operator="atop" />
        </filter>
    </defs>
    </svg>
    <div class="loader" style="height:100vh;">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</div>