.progress-bar {
  width: 300px;
  height: 24px;
  padding: 4px;
  background-color: #191919;
  border-radius: 16px;
  -webkit-border-radius: 16px;
  -moz-border-radius: 16px;
  box-shadow: inset 0 1px 2px #000,0 1px 0 #2b2b2b;
  -webkit-box-shadow: inset 0 1px 2px #000,0 1px 0 #2b2b2b;
  -moz-box-shadow: inset 0 1px 2px #000,0 1px 0 #2b2b2b;
}

/*Parte interna de la barra */
.progress-bar:before {
  content: '';
  display: block;
  position: absolute;
  width: 200px;
  height: 24px;
  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;
}

/* las barras inclinadas */
.progress-bar:after {
  content: '|||||||||||||';
  display: block;
  position: absolute;
  width: 200px;
  height: 24px;
  overflow: hidden;
  border-radius: 12px;
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  transform: skewX(-30deg);
  -webkit-transform: skewX(-30deg);
  -moz-transform: skewX(-30deg);
  -o-transform: skewX(-30deg);
  font:bold 120px/80px sans-serif;
  letter-spacing: -6px;
  color: #000;
  opacity: 0.06;
}

/* el color de la barra */
.azul:before {
  background: #099;
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#099), to(#006A6B));
  background: -moz-linear-gradient(top, #099, #006A6B);
}

www.elclubdelprogramador.com

Simple Progress Bars with only CSS

Progress Bar CSS

css

CSS