:root {
    --orangeColor: #ff7901;
}

/*---------------Spinner---------------*/
.spinnerWrapper {
    position: fixed;
    display: none;
    top: 10%;
    width: 100%;
    left: 0;
    text-align: center;
    z-index: 999;
}

.spinner {
    width: 60px;
    height: 60px;
    border-radius: 100%;
    position: relative;
    margin: auto;
    z-index: 999;
}

    .spinner .circle {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        border-radius: 100%;
        border: calc(60px / 10) solid transparent;
    }


        .spinner .circle.circle-1 {
            border-top-color: var(--orangeColor);
            animation: half-circle-spinner-animation 1s infinite;
            -moz-animation: half-circle-spinner-animation 1s infinite;
            -webkit-animation: half-circle-spinner-animation 1s infinite;
            -o-animation: half-circle-spinner-animation 1s infinite;
        }
        .spinner .circle.circle-2 {
            border-bottom-color: var(--orangeColor);
            animation: half-circle-spinner-animation 1s infinite alternate;
            -moz-animation: half-circle-spinner-animation 1s infinite alternate;
            -webkit-animation: half-circle-spinner-animation 1s infinite alternate;
            -o-animation: half-circle-spinner-animation 1s infinite alternate;
        }

@keyframes half-circle-spinner-animation {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}