Multiple Progress Bar in html

Question

Multiple Progress Bar in html

Navigation

#1 by (3 votes)

1

I want to do this explained: a user buys 1750 points, the bar is filled in green if he completes the one of 2000. and he gets the number 1 prize if he completes another one and completes that of 3000. Then the 3000 is filled he wins the number 2 prize and if he keeps buying he will fill up each SEPARATE bar. IMPORTANT a bar is the continuation of the previous one, that is to say the sum of the 2000 adds to the 3000 or so I bought 2000 hens tomorrow I bought thousand hens total 3000 then two progress bars should be filled the one of 2000 and the one of 3000 in green.

What I have done is this but it is not divided like the image

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


</html>

html

asked by Juan Carlos Villamizar Alvarez 16.11.2018 в 16:14

source

1 answer

how to show queries of 2 tables in a single table with MySQL? How to execute sql statement that is stored in a string in C #

score 3 · Accepted Answer

The <progress> tag, like any other, must be closed. That is, you lack the </progress> after each one. Without it, the browser considers that the progress bars are "nested" (one inside the other) and only shows the outer one, which is the first of them.

Demo:

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