[SOLUCIONADO] Crear una barra de progreso

[marinamarina]

Hola

Estoy haciendo un portfolio y por cada programa quiero hacer una barra de progreso, es decir, Photoshotp y su barra, indesign y su barra.

Algo asi:


Alguien me podria echar una mano

Gracias

P.D. No se porque se ve tan mal. Se supone que encima de cada barra de progreso aparece el nombre de su referencia es decir pues uno es photoshop, el otro indesign....

[xfxstudios]

la pregunta es como estas listando los datos, si desde una base, o manual mente, porque eso va a influir, lo otro es que lo puedes hacer solo con css sin necesidad de js.

por ejemplo

Código HTML:

<progress max="100" value="80"></progress>
 

[marinamarina]

Seria manualmente.

He estado buscanco tutoriales e informacion sobre como hacer barras y ya he visto alguno, pero son horribles. Con ls css luego le podria yo misma darle otro estilo? y como añado un nombre dentro d ela barra?

Gracias

Iniciado por xfxstudios

la pregunta es como estas listando los datos, si desde una base, o manual mente, porque eso va a influir, lo otro es que lo puedes hacer solo con css sin necesidad de js.

por ejemplo

Código HTML:

<progress max="100" value="80"></progress>
 

[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: http://jsfiddle.net/L6kzb49h/

[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]

[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/

[xfxstudios]

Presiona RUN en jsfiddle para ver el efecto

[marinamarina]

Mil gracias, me lo ha dejado mascadisimo el tema. Esta noche lo amoldo a lo que yo quiero hacer y te cuento que tal me queda.

Un saludo y muchisimas gracias :)

mañana te cuento :)

Iniciado por xfxstudios

Presiona RUN en jsfiddle para ver el efecto

[marinamarina]

He cogido unos minutillos y acabo de hacerlo, genial!!!

Para que el progresso vaya mas despacio le he puesto 1000 y listo.

Por ultimo una pregunta mas. Esta pagina es un portfolio que simplemente es un index y todo va con scroll. Si quiero que empiece el progreso de las barras cuando me desplace a la zona, como lo puedo hacer?

por ejemplo cuando las competencias enten en pantalla el progresso del menu empiece en marcha. Eso como lo podria hacerlo?

[xfxstudios]

hay un plugin js que se llama waypoints si mal no recuerdo, y te ayuda a indicar cuando un elemnto debe animarse mientras realizas el scroll, algo asi: MUESTRA alli ves como mientras bajas van apareciendo los elementos o las animaciones que les indiques.

Puedes ver como implementarlo AQUI

[marinamarina]

Ok, salseare a ver si le pillo como debo hacer :)

MILLONES DE GRACIAS

[marinamarina]

Lo consegui :)

Gracias por toda la ayuda.

un saludo

marina

Iniciado por xfxstudios

hay un plugin js que se llama waypoints si mal no recuerdo, y te ayuda a indicar cuando un elemnto debe animarse mientras realizas el scroll, algo asi: [URL="http://psslpro.com/enginer4/PSSL-Pro-Software"]MUESTRA[/URL] alli ves como mientras bajas van apareciendo los elementos o las animaciones que les indiques.

Puedes ver como implementarlo [URL="http://imakewebthings.com/waypoints/"]AQUI[/URL]