:root {
    --color-text: #232424;
    --color-error: #DC2626;
    --color-success: #16A34A;
    --color-warning: #D97706;
    --color-info: #2563EB;
    --color-other: #7C3AED;
}

div.bar-loader {
    width: 80px;
    height: 120px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;

    span {
        flex: 1;
        height: 100%;
        background: var(--color-info);
        border-radius: 10px;
        animation: scale 1.2s ease-in-out infinite;
    }

    span:nth-child(2) {
        background: var(--color-warning);
        animation-delay: -1.1s;
    }

    span:nth-child(3) {
        background: var(--color-success);
        animation-delay: -1s;
    }

    span:nth-child(4) {
        background: var(--color-error);
        animation-delay: -.9s;
    }

    span:nth-child(5) {
        background: var(--color-other);
        animation-delay: -.8s;
    }
}

@keyframes scale {
    0%, 40%, 100% {
        transform: scaleY(.05);
    }
    20% {
        transform: scaleY(1);
    }
}