.loading {

    position: fixed;

    width: 100%;

    height: 100%;

    display: flex;

    flex-direction: row;

    justify-content: center;

    align-items: center;

    background-color: rgb(105 105 105 / 50%);

    z-index: 100;

}



.lds-ring {

    display: inline-block;

    position: relative;

    width: 80px;

    height: 80px;

}



    .lds-ring div {

        box-sizing: border-box;

        display: block;

        position: absolute;

        width: 100px;

        height: 100px;

        margin: 0px;

        border: 15px solid var(--text-color);

        border-radius: 50%;

        animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;

        border-color: var(--text-color) transparent transparent transparent;

    }



        .lds-ring div:nth-child(1) {

            animation-delay: -0.45s;

        }



        .lds-ring div:nth-child(2) {

            animation-delay: -0.3s;

        }



        .lds-ring div:nth-child(3) {

            animation-delay: -0.15s;

        }



@keyframes lds-ring {

    0% {

        transform: rotate(0deg);

    }



    100% {

        transform: rotate(360deg);

    }

}