1

Quiero hacer esto explicó: un usuario compra 1750 puntos, la barra se llena en color verde si completa la de 2000. y el obtiene el premio Numero 1. si realiza otra y completa la de 3000. Pues se llena la de 3000 gana el premio Numero 2 y si sigue comprando se va llenando cada barra SEPARADA. IMPORTANTE una barra es la continuación de la anterior es decir la suma de la de 2000 se suma a la de 3000 osea yo ho compre 2000 gallinas mañana compro mil gallinas total son 3000 entonces dos barras de progreso deben llenarse la de 2000 y la de 3000 en verde.

lo que tengo hecho es esto pero no sale dividido igual que la imagen

<html>
  <progress max="2000" value="700"><!--Divide--><progress max="3000" value="50"><!--Divide--><progress max="5000" value="20"><!--continbua igual que la imagen-->


</html>

Referencia a barra de progreso

2
  • No entiendo muy bien qué quieres lograr, podrías editar tu pregunta para darte a entender mejor? Puedes usar comas o puntos para separar tus ideas. Commented el 16 nov. 2018 a las 15:48
  • hermano lea Bien ya edite y reedite y organize que parte usted no entiende? quizas me explique mal.por las sudas pondre puntos y comas. Commented el 16 nov. 2018 a las 17:26

1 respuesta 1

3

El tag <progress>, como cualquier otro, debe ser cerrado. Es decir, te falta el </progress> tras cada una. Sin él, el navegador considera que las barras de progreso están "anidadas" (una dentro de otra) y sólo muestra la más exterior, que es la primera de ellas.

Demo:

<html>
  <body>
    <progress max="2000" value="700"></progress>
    <progress max="3000" value="50"></progress>
    <progress max="5000" value="20"></progress>
  </body>
</html>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.