Crear una barra de progreso

[xfxstudios]

si con jquery y la propiedad animate, modificamos un poco la estructura y hacemos esto

Código Javascript:

$(document).ready(function(){
        $('#photo').animate({
            width: 50+"%",
        });
        $('#In').animate({
            width: 70+"%",
        });
        $('#Ill').animate({
            width: 90+"%",
        });
    })
 

Código CSS:

.contenedor{
    width:500px;
}
.barra{
    position:relative;
    height:30px;
    background-color:#D5D5D5;
    width:100%;
    padding-top:5px;
}
.texto{
    position:absolute;
    padding-top:4px;
    padding-left:10px;
}
.color{
    position: absolute;
    background-color: #00BDE4;
    height: 25px;
 
}
 

Código HTML:

<div class="contenedor">
    <div class="barra">
          <div class="color" id="photo"></div>
          <div class="texto">Photoshop</div>
    </div><br>
    <div class="barra">
        <div class="color" id="In"></div>
        <div class="texto">InDesing</div>
    </div><br>
    <div class="barra">
        <div class="color" id="Ill"></div>
        <div class="texto">Illustrator</div>
    </div>
</div>
 

Aqui el ejemplo actualizado: http://jsfiddle.net/L6kzb49h/1/