Use CSS to auto expand-retract progress bar infinitely

bootstrap-progress-auto.css

/* this animation is for progress bars that are not active */
.progress.auto-progress > .bar {
  -webkit-animation: progress-bar-auto 2s linear infinite;
     -moz-animation: progress-bar-auto 2s linear infinite;
      -ms-animation: progress-bar-auto 2s linear infinite;
       -o-animation: progress-bar-auto 2s linear infinite;
          animation: progress-bar-auto 2s linear infinite;  
}

/* this animation is for progress bars that are active */
.progress.active.auto-progress > .bar {
  -webkit-animation: progress-bar-auto-active 2s linear infinite;
     -moz-animation: progress-bar-auto-active 2s linear infinite;
      -ms-animation: progress-bar-auto-active 2s linear infinite;
       -o-animation: progress-bar-auto-active 2s linear infinite;
          animation: progress-bar-auto-active 2s linear infinite;  
}

/* 
  Keyframe definitions below. 
  We have to have browser-specific keyframe definitions, so this gets repetitive.
  We also need two definitions for each specific browser targeted: 
    * We have to redefine the CSS animation for the `active` progress bars (based on bootstrap.css)
*/

@-webkit-keyframes progress-bar-auto {
  0% {
    width: 50%;
  }
  25% {
    width: 100%;
  }
  50% {
    width: 50%;
  }
  75% {
    width: 0%;
  }
  100% {
    width: 50%;
  }
}
@-webkit-keyframes progress-bar-auto-active {
  0% {
    width: 50%;
    background-position: 40px 0;
  }
  25% {
    width: 100%;
  }
  50% {
    width: 50%;
  }
  75% {
    width: 0%;
  }
  100% {
    width: 50%;
    background-position: 0 0;
  }
}
@-moz-keyframes progress-bar-auto {
  0% {
    width: 50%;
  }
  25% {
    width: 100%;
  }
  50% {
    width: 50%;
  }
  75% {
    width: 0%;
  }
  100% {
    width: 50%;
  }
}
@-moz-keyframes progress-bar-auto-active {
  0% {
    width: 50%;
    background-position: 40px 0;
  }
  25% {
    width: 100%;
  }
  50% {
    width: 50%;
  }
  75% {
    width: 0%;
  }
  100% {
    width: 50%;
    background-position: 0 0;
  }
}
@-ms-keyframes progress-bar-auto {
  0% {
    width: 50%;
  }
  25% {
    width: 100%;
  }
  50% {
    width: 50%;
  }
  75% {
    width: 0%;
  }
  100% {
    width: 50%;
  }
}
@-ms-keyframes progress-bar-auto-active {
  0% {
    width: 50%;
    background-position: 40px 0;
  }
  25% {
    width: 100%;
  }
  50% {
    width: 50%;
  }
  75% {
    width: 0%;
  }
  100% {
    width: 50%;
    background-position: 0 0;
  }
}
@-o-keyframes progress-bar-auto {
  0% {
    width: 50%;
  }
  25% {
    width: 100%;
  }
  50% {
    width: 50%;
  }
  75% {
    width: 0%;
  }
  100% {
    width: 50%;
  }
}
@-o-keyframes progress-bar-auto-active {
  0% {
    width: 50%;
    background-position: 40px 0;
  }
  25% {
    width: 100%;
  }
  50% {
    width: 50%;
  }
  75% {
    width: 0%;
  }
  100% {
    width: 50%;
    background-position: 0 0;
  }
}
@keyframes progress-bar-auto {
  0% {
    width: 50%;
  }
  25% {
    width: 100%;
  }
  50% {
    width: 50%;
  }
  75% {
    width: 0%;
  }
  100% {
    width: 50%;
  }
}
@keyframes progress-bar-auto-active {
  0% {
    width: 50%;
    background-position: 40px 0;
  }
  25% {
    width: 100%;
  }
  50% {
    width: 50%;
  }
  75% {
    width: 0%;
  }
  100% {
    width: 50%;
    background-position: 0 0;
  }
}

When I initialize this in my HTML markup, I set the width of the div.bar element to 50%. That way, if a browser doesn't support CSS animations, at least the user sees something besides a progress bar that is at 0%;