<style>
    .main_loader {
        inset: 0;
        background-color: rgba(0, 0, 0, 0.678);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        transition: backdrop-filter 0.3s ease-in-out;

        height: 100vh;
        width: 100%;
        position: fixed;
        top: 0;
        left: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 9999;
    }

    .container_loader {
        --uib-size: 178px;
        --uib-color: #a3db2f;
        --uib-speed: 1.4s;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        display: flex;
        align-items: center;
        justify-content: center;
        width: calc(var(--uib-size) * 0.51);
        height: calc(var(--uib-size) * 0.51);
    }

    .dot {
        position: relative;
        display: flex;
        flex-shrink: 0;
        align-items: center;
        height: 100%;
        width: 25%;
        transform-origin: center top;
    }

    .dot::after {
        content: '';
        display: block;
        width: 100%;
        height: 25%;
        border-radius: 50%;
        background-color: var(--uib-color);
        transition: background-color 0.3s ease;
    }

    .dot:first-child {
        animation: swing var(--uib-speed) linear infinite;
    }

    .dot:last-child {
        animation: swing2 var(--uib-speed) linear infinite;
    }

    @keyframes swing {
        0% {
            transform: rotate(0deg);
            animation-timing-function: ease-out;
        }

        25% {
            transform: rotate(70deg);
            animation-timing-function: ease-in;
        }

        50% {
            transform: rotate(0deg);
            animation-timing-function: linear;
        }
    }

    @keyframes swing2 {
        0% {
            transform: rotate(0deg);
            animation-timing-function: linear;
        }

        50% {
            transform: rotate(0deg);
            animation-timing-function: ease-out;
        }

        75% {
            transform: rotate(-70deg);
            animation-timing-function: ease-in;
        }
    }
</style>



<div id="preloader" class="top-0 bottom-0 fixed left-0 w-full h-screen z-50 p-10" style="z-index: 9999 !important;">


    <div class="main_loader">
        <div class="container_loader">
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
        </div>
    </div>



</div>


<script>
    window.addEventListener('load', function() {
        setTimeout(function() {
            const preloader = document.getElementById('preloader');
            preloader.style.opacity = '0';
            setTimeout(() => preloader.style.display = 'none', 500);
        }, 3000);
    });
</script>

</div>
