Progress Bar CSS

progress-bar.css

.progress-bar {
  width: 95%;
  height: 14px;
  padding: 3px;
  background-color: #ffffff;
  overflow:hidden;
  border-radius:16px;
  box-shadow: inset 0 1px 2px #000,
    0 1px 0 #2b2b2b;
    float:right;
}

/* code for the inner (colorful) part of the bar */
.progress-bar:before {
  content: '';
  display: block;
  position: absolute;
  padding:0;
  margin:0;
  height: 14px;
  background: #999;
  border-radius: 12px;
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3),
   inset 0 -1px 3px rgba(0, 0, 0, 0.4),
   0 1px 1px #000;
  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3),
    inset 0 -1px 3px rgba(0, 0, 0, 0.4),
    0 1px 1px #000;
  -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3),
    inset 0 -1px 3px rgba(0, 0, 0, 0.4),
    0 1px 1px #000;
}

/* code to stripe the bars */
.progress-bar:after {
  content: '|||||||||||||';
  display: block;
  position: absolute;
  padding:0;
  margin:0;
  height: 14px;
  overflow: hidden;
  .border-radius ( 12px );
  .skew ( -30deg );
  font:bold 120px/80px sans-serif;
  letter-spacing: -6px;
  color: #000;
  opacity: 0.07;
}

.step-one:after, .step-one:before{
    width:10%;
}

.step-two:after, .step-two:before{
    width:20%;
}

.step-three:after, .step-three:before{
    width:30%;
}

.step-four:after, .step-four:before{
    width:40%;
}

.step-five:after, .step-five:before{
    width:51%;
}

.step-six:after, .step-six:before{
    width:62%;
}

.step-seven:after, .step-seven:before{
    width:73%;
}

.step-eight:after, .step-eight:before{
    width:84%;
}

.step-nine:after, .step-nine:before{
    width:95%;
}

/* code for the colors */

.green:before {
  background: #0E6F3C;
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0E6F3C), to(#0a4b29));
  background: -moz-linear-gradient(top, #0E6F3C, #0a4b29);
}