<style>
    @keyframes scaling {
        0% {
            top: 0;
        }

        50% {
            top: 100px;
            animation-timing-function: ease-out;
        }

        100% {
            top: 0;
        }
    }

    .loader_img {
        position: relative;
        animation: scaling 1s infinite ease-in-out;


    }

    @keyframes show {
        0% {
            opacity: 0;
            display: block;
        }

        100% {
            opacity: 1;
        }
    }

    @keyframes hide {
        0% {
            opacity: 1;
        }

        100% {
            opacity: 0;
            display: none
        }
    }

    .show {
        animation: show .5s ease-in;

    }

    .hide {
        animation: hide .5s ease-out;

    }

    img {
        user-select: none;
        -moz-user-select: none;
        -webkit-user-drag: none;
        -webkit-user-select: none;
        -ms-user-select: none;
    }
</style>

<div style="z-index: 999; position: fixed; top: 0; bottom: 0; left: 0; right: 0; transition: 1s;"
    class="flex items-center justify-center h-full flex-wrap transition-all shadow-none duration-250 ease-soft-in rounded-2xl lg:flex-nowrap backdrop-blur bg-slate-900/5 shadow-blur loader">
    <img style="width: 80px;" class="loader_img" src="./assets/img/confirmid-2.png" alt="">

</div>
<script>
    $(document).bind("ajaxSend", () => {

        $('.loader').fadeIn("slow")

    }).bind("ajaxComplete", () => {

        $('.loader').fadeOut("slow")

    })

    $(window).on('load', function () {

        $('.loader').fadeOut("slow")

    })
</script>