Progress bar در CSS

Progress bar ساده با CSS:

.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);
    }