.loading-svg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: auto;
    padding: 10px;
    background-color: rgb(255,255,255,0.2);
    border-radius: 50%;
}
.loading-title {
    font-size: 3rem;
    font-weight: bold;
}

.half-circle {
    stroke-dasharray: 314.1592653589793;
    transform-origin: 50% 50%;
    transform: rotate(-90deg);
    stroke-dashoffset: 264;
    -webkit-animation: rotateCircle 2.2s cubic-bezier(0.645, 0.045, 0.355, 1) infinite both, delayedSnake 2.2s ease-in-out infinite;
    animation: rotateCircle 2.2s cubic-bezier(0.645, 0.045, 0.355, 1) infinite both, delayedSnake 2.2s ease-in-out infinite;
}

.hourglass {
    stroke-dasharray: 210;
    -webkit-animation: snake 3s linear infinite both;
    animation: snake 3s linear infinite both;
}

@-webkit-keyframes rotateCircle {
    0% {
        transform: rotate(-105deg);
    }

    5% {
        transform: rotate(-105deg);
    }

    95% {
        transform: rotate(105deg);
    }

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

@keyframes rotateCircle {
    0% {
        transform: rotate(-105deg);
    }

    5% {
        transform: rotate(-105deg);
    }

    95% {
        transform: rotate(105deg);
    }

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

@-webkit-keyframes delayedSnake {
    0% {
        stroke-dashoffset: 260;
    }

    50% {
        stroke-dashoffset: 0;
    }

    100% {
        stroke-dashoffset: -260;
    }
}

@keyframes delayedSnake {
    0% {
        stroke-dashoffset: 260;
    }

    50% {
        stroke-dashoffset: 0;
    }

    100% {
        stroke-dashoffset: -260;
    }
}

@-webkit-keyframes snake {
    0% {
        stroke-dashoffset: 0;
    }

    100% {
        stroke-dashoffset: 420;
    }
}

@keyframes snake {
    0% {
        stroke-dashoffset: 0;
    }

    100% {
        stroke-dashoffset: 420;
    }
}