/* loading element style */
.loading {
    width        : var(--radius);
    height       : var(--radius);
    border-radius: 50%;
    border       : var(--ring-width) solid var(--light-color);

}

:root {
    --light-color: rgba(10, 10, 220, .2);
    --dark-color : rgba(10, 10, 220, 1);
    --radius     : 64px;
    --ring-width : 4px;
}

.loading:before {
    display      : block;
    position     : relative;
    left         : calc(var(--ring-width) * -1);
    top          : calc(var(--ring-width) * -1);
    content      : ' ';
    width        : var(--radius);
    height       : var(--radius);
    border-radius: 50%;
    border       : var(--ring-width) solid;
    border-color : var(--dark-color) transparent transparent transparent;
    animation    : loading-rotate .8s ease-out infinite;
}

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

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