@ebay/skin/dist/progress-bar-expressive/progress-bar-expressive.css

Skin - CSS modules that represent the brand eBay

:root {
    --progress-bar-expressive-color-1: var(--color-red-500);
    --progress-bar-expressive-color-2: var(--color-blue-500);
    --progress-bar-expressive-color-3: var(--color-yellow-400);
    --progress-bar-expressive-color-4: var(--color-green-500);
    --progress-bar-expressive-line-border-radius: 2px;
    --progress-bar-expressive-line-count: 12;
    --progress-bar-expressive-line-gap: var(--spacing-50);
    --progress-bar-expressive-line-height: 6px;
    --progress-bar-expressive-line-scale-duration: 3s;
    --progress-bar-expressive-line-scroll-duration: 20s;
    --progress-bar-expressive-line-width-a1: 25%;
    --progress-bar-expressive-line-width-a2: 15%;
    --progress-bar-expressive-line-width-a3: 40%;
    --progress-bar-expressive-line-width-a4: 20%;
    --progress-bar-expressive-line-width-b1: 17%;
    --progress-bar-expressive-line-width-b2: 21%;
    --progress-bar-expressive-line-width-b3: 30%;
    --progress-bar-expressive-line-width-b4: 32%;
    --progress-bar-expressive-line-width-c1: 39%;
    --progress-bar-expressive-line-width-c2: 29%;
    --progress-bar-expressive-line-width-c3: 20%;
    --progress-bar-expressive-line-width-c4: 12%;
    --progress-bar-expressive-message-animatein-duration: 833ms;
    --progress-bar-expressive-message-animateout-duration: 400ms;
}
.progress-bar-expressive {
    align-items: stretch;
    display: grid;
    grid-template-columns: 1fr;
    justify-content: end;
    margin: 0 auto;
    max-width: 375px;
    row-gap: var(--spacing-300);
    width: 100%;
}
.progress-bar-expressive--loaded {
    display: none;
}
.progress-bar-expressive__messages {
    color: var(--color-foreground-primary);
    font-size: var(--font-size-large-1);
    font-weight: var(--font-weight-400);
    line-height: calc(var(--spacing-50) + var(--spacing-300));
    margin: 0 var(--spacing-200);
    min-height: 3rem;
    position: relative;
    text-align: center;
}
.progress-bar-expressive__messages--medium {
    font-size: var(--font-size-medium);
    font-weight: var(--font-weight-600);
    line-height: var(--spacing-300);
}
.progress-bar-expressive__message {
    inset: auto 0 0;
    position: absolute;
}
.progress-bar-expressive__message[role="status"] {
    opacity: 1;
}
.progress-bar-expressive__message[aria-hidden="true"] {
    opacity: 0;
}
.progress-bar-expressive__message--in {
    animation: progress-bar-expressive-message-animatein
        var(--progress-bar-expressive-message-animatein-duration)
        cubic-bezier(0.3, 0, 0, 1) both;
}
.progress-bar-expressive__message--out {
    animation: progress-bar-expressive-message-animateout
        var(--progress-bar-expressive-message-animateout-duration)
        cubic-bezier(0.3, 0, 0, 1) both;
}
.progress-bar-expressive__progress[role="progressbar"] {
    border-radius: var(--progress-bar-expressive-line-border-radius);
    margin: 0 var(--spacing-200);
    overflow: hidden;
}
.progress-bar-expressive__lines {
    display: flex;
    overflow: visible;
    width: calc(100% - var(--progress-bar-expressive-line-gap) * 3);
}
.progress-bar-expressive__line {
    animation:
        progress-bar-expressive-line-reorder
            var(--progress-bar-expressive-line-scale-duration)
            steps(var(--progress-bar-expressive-line-count)) infinite,
        progress-bar-expressive-line-scale-width
            var(--progress-bar-expressive-line-scale-duration) infinite;
    border-radius: var(--progress-bar-expressive-line-border-radius);
    display: inline-block;
    flex-shrink: 0;
    height: var(--progress-bar-expressive-line-height);
    line-height: 0;
    order: 1;
}
.progress-bar-expressive__line:nth-child(4n + 1) {
    background-color: var(--progress-bar-expressive-color-4);
}
.progress-bar-expressive__line:nth-child(4n + 2) {
    background-color: var(--progress-bar-expressive-color-3);
}
.progress-bar-expressive__line:nth-child(4n + 3) {
    background-color: var(--progress-bar-expressive-color-2);
}
.progress-bar-expressive__line:nth-child(4n + 4) {
    background-color: var(--progress-bar-expressive-color-1);
}
.progress-bar-expressive__line:first-child {
    animation-delay: calc(
        (
                var(--progress-bar-expressive-line-scale-duration) -
                    var(--progress-bar-expressive-line-scale-duration) /
                    var(--progress-bar-expressive-line-count)
            ) *
            -1
    );
    width: var(--progress-bar-expressive-line-width-a1);
}
.progress-bar-expressive__line:nth-child(2) {
    animation-delay: calc(
        (
                var(--progress-bar-expressive-line-scale-duration) -
                    var(--progress-bar-expressive-line-scale-duration) /
                    var(--progress-bar-expressive-line-count) * 2
            ) *
            -1
    );
    width: var(--progress-bar-expressive-line-width-a2);
}
.progress-bar-expressive__line:nth-child(3) {
    animation-delay: calc(
        (
                var(--progress-bar-expressive-line-scale-duration) -
                    var(--progress-bar-expressive-line-scale-duration) /
                    var(--progress-bar-expressive-line-count) * 3
            ) *
            -1
    );
    width: var(--progress-bar-expressive-line-width-a3);
}
.progress-bar-expressive__line:nth-child(4) {
    animation-delay: calc(
        (
                var(--progress-bar-expressive-line-scale-duration) -
                    var(--progress-bar-expressive-line-scale-duration) /
                    var(--progress-bar-expressive-line-count) * 4
            ) *
            -1
    );
    width: var(--progress-bar-expressive-line-width-a4);
}
.progress-bar-expressive__line:nth-child(5) {
    animation-delay: calc(
        (
                var(--progress-bar-expressive-line-scale-duration) -
                    var(--progress-bar-expressive-line-scale-duration) /
                    var(--progress-bar-expressive-line-count) * 5
            ) *
            -1
    );
    width: var(--progress-bar-expressive-line-width-b1);
}
.progress-bar-expressive__line:nth-child(6) {
    animation-delay: calc(
        (
                var(--progress-bar-expressive-line-scale-duration) -
                    var(--progress-bar-expressive-line-scale-duration) /
                    var(--progress-bar-expressive-line-count) * 6
            ) *
            -1
    );
    width: var(--progress-bar-expressive-line-width-b2);
}
.progress-bar-expressive__line:nth-child(7) {
    animation-delay: calc(
        (
                var(--progress-bar-expressive-line-scale-duration) -
                    var(--progress-bar-expressive-line-scale-duration) /
                    var(--progress-bar-expressive-line-count) * 7
            ) *
            -1
    );
    width: var(--progress-bar-expressive-line-width-b3);
}
.progress-bar-expressive__line:nth-child(8) {
    animation-delay: calc(
        (
                var(--progress-bar-expressive-line-scale-duration) -
                    var(--progress-bar-expressive-line-scale-duration) /
                    var(--progress-bar-expressive-line-count) * 8
            ) *
            -1
    );
    width: var(--progress-bar-expressive-line-width-b4);
}
.progress-bar-expressive__line:nth-child(9) {
    animation-delay: calc(
        (
                var(--progress-bar-expressive-line-scale-duration) -
                    var(--progress-bar-expressive-line-scale-duration) /
                    var(--progress-bar-expressive-line-count) * 9
            ) *
            -1
    );
    width: var(--progress-bar-expressive-line-width-c1);
}
.progress-bar-expressive__line:nth-child(10) {
    animation-delay: calc(
        (
                var(--progress-bar-expressive-line-scale-duration) -
                    var(--progress-bar-expressive-line-scale-duration) /
                    var(--progress-bar-expressive-line-count) * 10
            ) *
            -1
    );
    width: var(--progress-bar-expressive-line-width-c2);
}
.progress-bar-expressive__line:nth-child(11) {
    animation-delay: calc(
        (
                var(--progress-bar-expressive-line-scale-duration) -
                    var(--progress-bar-expressive-line-scale-duration) /
                    var(--progress-bar-expressive-line-count) * 11
            ) *
            -1
    );
    width: var(--progress-bar-expressive-line-width-c3);
}
.progress-bar-expressive__line:nth-child(12) {
    animation-delay: calc(
        (
                var(--progress-bar-expressive-line-scale-duration) -
                    var(--progress-bar-expressive-line-scale-duration) /
                    var(--progress-bar-expressive-line-count) * 12
            ) *
            -1
    );
    width: var(--progress-bar-expressive-line-width-c4);
}
@media (prefers-reduced-motion) {
    .progress-bar-expressive__message--in,
    .progress-bar-expressive__message--out {
        animation: none;
    }
    .progress-bar-expressive__message[aria-hidden="true"] {
        display: none;
    }
    .progress-bar-expressive__messages:not(
            .progress-bar-expressive__messages--medium
        )
        .progress-bar-expressive__message--initial[role="status"] {
        animation: progress-bar-expressive-message-fadein
            var(--progress-bar-expressive-message-animatein-duration)
            cubic-bezier(0.3, 0, 0, 1) both;
    }
    .progress-bar-expressive__lines {
        animation: progress-bar-expressive-reduced-motion-line-scroll
            var(--progress-bar-expressive-line-scroll-duration) linear infinite;
        overflow: visible;
    }
    .progress-bar-expressive__line {
        animation: none;
        animation-delay: none;
        margin-right: var(--progress-bar-expressive-line-gap);
    }
    .progress-bar-expressive__line:nth-child(4n + 1) {
        background-color: var(--progress-bar-expressive-color-1);
    }
    .progress-bar-expressive__line:nth-child(4n + 2) {
        background-color: var(--progress-bar-expressive-color-2);
    }
    .progress-bar-expressive__line:nth-child(4n + 3) {
        background-color: var(--progress-bar-expressive-color-3);
    }
    .progress-bar-expressive__line:nth-child(4n + 4) {
        background-color: var(--progress-bar-expressive-color-4);
    }
    .progress-bar-expressive__line:nth-child(9) {
        width: var(--progress-bar-expressive-line-width-a1);
    }
    .progress-bar-expressive__line:nth-child(10) {
        width: var(--progress-bar-expressive-line-width-a2);
    }
    .progress-bar-expressive__line:nth-child(11) {
        width: var(--progress-bar-expressive-line-width-a3);
    }
    .progress-bar-expressive__line:nth-child(12) {
        width: var(--progress-bar-expressive-line-width-a4);
    }
}
@keyframes progress-bar-expressive-message-animateout {
    0% {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(calc(var(--font-size-large-2) * -1));
    }
}
@keyframes progress-bar-expressive-message-animatein {
    0% {
        opacity: 0;
        transform: translateY(var(--font-size-large-2));
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
@keyframes progress-bar-expressive-message-fadein {
    0% {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@keyframes progress-bar-expressive-line-reorder {
    0% {
        order: 0;
    }
    to {
        order: var(--progress-bar-expressive-line-count);
    }
}
@keyframes progress-bar-expressive-line-scale-width {
    0% {
        margin-right: 0;
        width: 0;
    }
    12.5% {
        margin-right: var(--progress-bar-expressive-line-gap);
    }
    50%,
    to {
        margin-right: var(--progress-bar-expressive-line-gap);
    }
}
@keyframes progress-bar-expressive-reduced-motion-line-scroll {
    0% {
        transform: translateX(
            calc(-200% - var(--progress-bar-expressive-line-gap) * 8)
        );
    }
    to {
        transform: translateX(0);
    }
}