barra de progreso con solo html y css

Estoy tratando de crear una barra de progreso usando solo html y css y no puedo hacer que la imagen se mueva si la barra de progreso cambia. Por ejemplo, si lo configuro en 25 %, 50 %, 75 %, quiero un punto al final del espectro de progreso.

Aquí está mi código HTML:

<div class="progress">
  <div class="progress-bar">
    <img src="http://placehold.it/10x10">
  </div>
</div>

Y este es mi CSS:

.progress {
  height:2px;
  width:300px;
  background-color: gray;
  position: relative;
}

.progress-bar {
  height:2px;
  width:20%;
  position: absolute;
  background-color: red;
}

.progress-bar img {
  position: absolute;  
}

¿Dónde me estoy equivocando?

preguntado el 19 de mayo de 14 a las 15:05

Utilice el elemento de progreso de HTML5: <progress value="70" max="100">70 %</progress> -

¿Quieres la imagen de marcador de posición al final del progreso? O algo mas. -

si, quiero esa imagen al final del progreso. :) -

2 Respuestas

DEMO

.progress {
  height:2px;
  width:300px;
  background-color: gray;
  position: relative;
}

.progress-bar {
  height:2px;
  width:40%;
  position: absolute;
  background-color: red;
}

.progress-bar img {
  position: absolute;
  left: 100%:
}

Haz que la imagen sea left:100%

contestado el 19 de mayo de 14 a las 15:05

Quiero esa imagen al final del progreso, no estirada. Lo siento si no me aclaré. - Radu

.progress-bar img { posición: absoluta; izquierda: 100%; } - mohamedrias

Gracias, señor: D ... si pudiera modificar su respuesta para que pueda marcarla como la correcta, sería bueno :) - Radu

Sí, lo he modificado :) - mohamedrias

¡Hice este para un proyecto antiguo y funciona muy bien!

#pourcentage {
    width:100px;
    padding:2px;
    background-color:white;
    text-align:center;
    height: 20px;
}
#indicatorValid {
    background-color: #2ecc71;
    text-align: center;
    color: white;
    height: 20px;
    float: left;
}
#indicatorErreur {
    background-color:#E44C41;
    text-align: center;
    color: white;
    height: 20px;
    float: right;
}

  <div id='pourcentage'>
    <div style='width:50px;' id='indicatorValid'>50 %</div>
    <div style='width:50px;' id='indicatorErreur'>50 %</div>
  </div>

http://jsfiddle.net/53Dnd/

contestado el 19 de mayo de 14 a las 15:05

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.