:root {
    --triangle-base: 16px;
    --triangle-height: 10px;
}
.LoadingSpinner {
    position: absolute;
    height: 100%;
    width: 100%;
    display: grid;
    align-items: center;
    justify-content: center;
    z-index: var(--z-index-cover);
    transition: var(--fast-visibility-transition);
    top: 0;
    left: 0;
    border-radius: var(--theme-border-radius);
    overflow: hidden;
}
.LoadingSpinner:after {
    content: "";
    opacity: .9;
    display: flex;
    width: 100%;
    background-color: black;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: var(--z-index-pushback);
}

.LoadingSpinner > .spinner {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(3, 1fr);
    align-items: center;
    justify-content: center;
    width: min-content;
    grid-gap: 1px;
}

.LoadingSpinner > .spinner > .row {
    display: grid;
    /* align-items: center; */
    /* justify-content: center; */
    grid-template-columns: repeat(5, calc(var(--triangle-base) - 2px));
    /* grid-template-rows: 1fr; */
}
.LoadingSpinner > .spinner > .row > .cell {
    height: calc(var(--triangle-base) + 1px);
}
.LoadingSpinner > .spinner > .row > .cell:before {
    content: "";
    display: block;
    border-bottom: var(--triangle-base) solid var(--theme-primary);
    border-left: var(--triangle-height) solid transparent;
    border-right: var(--triangle-height) solid transparent;
    transition: border-bottom-color linear;
}

.LoadingSpinner > .spinner > .row > .cell.blank {
    opacity: 0;
}
.LoadingSpinner > .spinner > .row > .cell.inverted {
    transform: scaleY(-1);
}

@keyframes loadingCell {
    0% {
        opacity: 1;
    }
    50% {
        opacity: .2;
    }
}