.progressContainer {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 5px;
    overflow: hidden;
    background-color: $color-inputBg;
    border-radius: 100px;
}

@keyframes indeterminate {
    0% {
        transform: translate3d(-100%, 0, 0);
    }

    100% {
        transform: translate3d(105%, 0, 0);
    }
}

.progress {
    transform-origin: left;
    background-color: $color-primary;
    height: 100%;
    width: 100%;
    transition: 0.2s ease;
    border-radius: 100px;
}

.indeterminate .progress {
    -webkit-mask-mage: linear-gradient(
        to right,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0.69) 9%,
        rgba(0, 0, 0, 0.82) 22%,
        rgba(0, 0, 0, 1) 50%,
        rgba(0, 0, 0, 0.82) 78%,
        rgba(0, 0, 0, 0.69) 91%,
        rgba(0, 0, 0, 0) 100%
    );
    backface-visibility: hidden;
    animation: indeterminate 1500ms ease 0s infinite;
}

@each $kind, $color in $color-presets {
    .#{$kind} .progress {
        background-color: $color;
    }
}