@keyframes animate-stripes {
    0% {
        background-position: 0 0;
    }
  
    100% {
        background-position: 60px 0;
    }
}
  
.progress-bar {
    height: 3px;
    border-radius: 5px;
}

.stripes {
    background-size: 30px 30px;
    background-image: linear-gradient(
        135deg,
        #34364A 25%,
        transparent 25%,
        transparent 50%,
        #34364A 50%,
        #34364A 75%,
        transparent 75%,
        transparent
    );
}

.stripes.animated {
    animation: animate-stripes 0.6s linear infinite;
}

.stripes.animated.slower {
    animation-duration: 1.25s;
}

.stripes.reverse {
    animation-direction: reverse;
}

.progress-bar-inner {
    display: block;
    height: 3px;
    width: 0%;
    background-color: #DF2D2D;
    border-radius: 3px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;
    position: relative;
    animation: auto-progress 10s infinite linear;
}