.c-loading-spinner {
    box-sizing: border-box;
    width: $spinner-size;
    height: $spinner-size;
    border-radius: 50%;
    position: relative;
    border: $spinner-width solid $spinner-background;
    border-top-color: $spinner-color;
    transform: translateZ(0);
    $loading-start-duration: 0.65s;
    animation-name: loading-start, loading-normal-spin;
    animation-duration: $loading-start-duration, 1s;
    animation-iteration-count: 1, infinite;
    animation-timing-function: ease-in, linear;
    animation-delay: 0s, $loading-start-duration;
}

$loading-start-transform-end: 45deg;
@keyframes loading-start {
    0% { transform: rotate(-45deg) }
    100% { transform: rotate($loading-start-transform-end) }
}

@keyframes loading-normal-spin {
    0% { transform: rotate($loading-start-transform-end) }
    100% { transform: rotate(405deg) }
}