Crear una barra de progreso

[marinamarina]

Madre mia, que rapidez!!!
esta genial, pero eso esta estatico? es decir cuando entro en la pagina como podria ver el proceso de la barra? le tendria que añadir jquery o algo, no?

Iniciado por xfxstudios

si puedes, mira este ejemplo que te cree alli rapidito, claro se puede mejorar o adaptar:

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" style="width:50%;"></div>
          <div class="texto">Photoshop</div>
    </div><br>
    <div class="barra">
        <div class="color" style="width:90%;"></div>
        <div class="texto">InDesing</div>
    </div><br>
    <div class="barra">
        <div class="color" style="width:20%;"></div>
        <div class="texto">Illustrator</div>
    </div>
</div>
 

MUESTRA: [url]http://jsfiddle.net/L6kzb49h/[/url]