index.css

.loader-wrapper {
    position: fixed;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    width: 100vw;
    height: 100vh;
    background: #fff;
    z-index: 9999
}

.multi-ripple {
    width: 5rem;
    height: 5rem
}

.multi-ripple div {
    position: absolute;
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
    border: .3rem solid #0c92df;
    -webkit-animation: 1.5s ripple infinite;
    animation: 1.5s ripple infinite;
    opacity: 0
}

.multi-ripple div:nth-child(2) {
    -webkit-animation-delay: .5s;
    animation-delay: .5s
}

@-webkit-keyframes ripple {
    from {
        -webkit-transform: scale(0);
        transform: scale(0);
        opacity: 1
    }
    to {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 0
    }
}

@keyframes ripple {
    from {
        -webkit-transform: scale(0);
        transform: scale(0);
        opacity: 1
    }
    to {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 0
    }
}

index.html

<div class="loader-wrapper">
    <div class="multi-ripple">
        <div></div>
        <div></div>
    </div>
</div>

index.js

$(window).ready(function () {
    $(".loader-wrapper").fadeOut("slow")
});