.loader-container {
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 999;
    top: 0;
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.loader-img-container{
    width: 100px;
    height: 100px;
    border: transparent solid 5px;
    border-radius: 50%;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    background-color: #ffffff;
    z-index: 1000;
    overflow: hidden;
    padding: 10px;
}

.loader-img-container::after{
    content: '';
    background: rgb(67,187,236);
    background: linear-gradient(270deg, rgba(67,187,236,1) 0%, rgba(40,135,199,1) 33%, rgba(233,225,12,1) 66%, rgba(113,183,52,1) 100%);
    width: 200px;
    height: 200px;
    border-radius: 50%;
    position: absolute;
    z-index: 998;
    animation: animate 4s infinite linear;
}

.loader-img-container::before{
    content: '';
    background-color: #fff;
    width: 80px;
    height: 80px;
    border: transparent solid 8px;
    border-radius: 50%;
    position: absolute;
    z-index: 999;
}

.loader-img{
    width: 80px;
    height: 80px;
    position: relative;
    z-index: 1000;
    background-color: #fff;
    border-radius: 50%;
    padding: 15px;
}

@keyframes animate {
    0% {
        transform: rotateZ(0deg);
    }
    100%{
        transform: rotateZ(360deg);
    }
}