<style>
.loader-container {
    background-color: #fff;
    width: 100vw;
    height: 100vh;
    z-index: 99999;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.loader {
    column-gap: 20px;
    display: flex;
    height: 100%;
    justify-content: center;
    align-items: center;
}
.loader .dot {
    width: 40px;
    height: 40px;
    background-color: black;
    border-radius: 50%;
    animation: loading 1s infinite alternate;
}
.loader .dot:nth-child(1) {
    background-color: #4285f4;
    animation-delay: -0.25s;
}
.loader .dot:nth-child(2) {
    background-color: #ea4335;
    animation-delay: -0.5s;
}
.loader .dot:nth-child(3) {
    background-color: #fbbc05;
    animation-delay: -0.75s;
}
.loader .dot:nth-child(4) {
    background-color: #34a853;
    animation-delay: -1s;
}
@keyframes loading {
    0% {
        transform: translateY(-15px);
    }
    100% {
        transform: translateY(5px);
    }
}


</style>

<div class="loader-container" id="loader-container">
    <div class="loader" >
        <img src="{{ asset(setting('logo')) }}" style="max-width:400px">
    </div>
</div>


