.spinner.loading:before {
    content: "";
    position: absolute;
    border-style: solid;
    border-radius: 100%;
    top: calc(50% - calc((var--spinner-size) / 2));
    left: calc(50% - calc((var--spinner-size) / 2));;
    height: var(--spinner-size);
    width: var(--spinner-size);
    margin: var(--spinner-margin);
    border-width: var(--spinner-width);
    border-color: var(--spinner-color);
    background-color: var(--spinner-background-color);
    opacity: var(--spinner-opacity);
    animation: rotation var(--spinner-speed) infinite linear;
}

@keyframes rotation {
    from { transform: rotate(0); }
    to { transform: rotate(359deg); }
}

/* Text
-------------------------------------------- */


/* Needs to be organized
--------------------------------------------
--------------------------------------------
--------------------------------------------
-------------------------------------------- */
.loading-text { position: absolute; top: calc(50% - 15px); left: calc(50% - 52px); text-align: center; }
.spinner.loading { padding: 50px; text-align: center; }