<div id="progress-bar"></div>

@import "compass/css3";

#progress-bar {
  position:relative;
  border:1px solid rgba(0,0,0,0.8);
  width:0;
  height:20px;
  margin:80px 0 0 80px;
  background:repeating-linear-gradient(-45deg, red, red 20px, orangered 20px, orangered 40px);
  border-radius:0.8em;
  animation: roll 5s linear infinite;
  box-shadow: 
    inset 0 10px 10px rgba(255,255,255,0.2), 
    inset 0 1px 0 rgba(255,255,255,0.3), 
    inset 0 -5px 3px rgba(0,0,0,0.2),
    0 3px 2px rgba(0,0,0,0.3);
}

#progress-bar:after {
  width:300px;
  height:28px;
  border:1px solid rgba(0,0,0,0.8);
  background:#333;
  border-radius:1em;
  display:block;
  content:"";
  position:absolute;
  left:-5px;
  top:-5px;
  z-index:-1;
}

@-moz-keyframes roll {
  0% { width:0; }
  100% { width:290px; }
}

@-webkit-keyframes roll {
  0% { width:0; }
  100% { width:290px; }
}