* {
    padding: 0;
    margin: 0;
}
#app-loading {
    background: rgba(255,255,255,0.9);
    position: fixed;
    left: 0;
    right: 0;
    top:0;
    bottom: 0;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center
}

.app-page-loading {
    --d:22px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    color: #333333;
    box-shadow:
            calc(1*var(--d))      calc(0*var(--d))     0 0,
            calc(0.707*var(--d))  calc(0.707*var(--d)) 0 1px,
            calc(0*var(--d))      calc(1*var(--d))     0 2px,
            calc(-0.707*var(--d)) calc(0.707*var(--d)) 0 3px,
            calc(-1*var(--d))     calc(0*var(--d))     0 4px,
            calc(-0.707*var(--d)) calc(-0.707*var(--d))0 5px,
            calc(0*var(--d))      calc(-1*var(--d))    0 6px;
    animation: l27 1s infinite steps(8);
}
@keyframes l27 {
    100% {transform: rotate(1turn)}
}