.loader {
    position: fixed;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /*background-color: #f3f3f3;*/
    z-index: 9999;
    align-items: center !important;
    display: flex;
    background: linear-gradient(-45deg, rgb(238, 119, 82), rgb(231, 60, 126), rgb(73, 161, 181), rgb(86, 170, 136)) 0% 0% / 400% 400%;
    animation: 15s ease 0s infinite normal none running gradient;
}


@keyframes morph {
    0% {
        border-radius: 60% 40% 30% 70%/60% 30% 70% 40%;
    }
    50% {
        border-radius: 30% 60% 70% 40%/50% 60% 30% 60%;
    }
    100% {
        border-radius: 60% 40% 30% 70%/60% 30% 70% 40%;
    }
}

@keyframes  gradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}


.loader > .loader-box {
    align-items: center !important;
    display: flex;
    border-radius: 100%;
    position: relative;
    margin: 0 auto;
}
.loader .loader-box > div {
    width: 250px;
    height: 250px;
    text-align: center;
    font-size: 53px;
    color: #fff;
    text-shadow: 0 0 8px #bbbaba;
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 50px;
    animation: morph 8s ease-in-out infinite;
    border-radius: 60% 40% 30% 70%/60% 30% 70% 40%;
    transition: all 1s ease-in-out;
}
.loader .loader-box > div >img {
    object-fit: contain;
    height: auto;
    background-color: transparent;
    width: 100%;
    border-radius: 15px;
}