CODEWITHSUNDEEP
htmlcss
MaD
MaD

Reputation: 139

progress bar without percent

Here's the problem : i have a value and a maximum and i want to display them like in progress bar (except there's no progress :-) : the value is displayed as a bar whose width is relative to the maximum.

I cannot do this with a percentage :

<div class="bar"><div class="bar-content" style="width:xx%"></div>

because i only know the value and the maximum, i don't "know" the relative value in percent. I'm aware i could use some javascript or do something on the server side but i'd rather use css and html only.

I can't figure out something so now i'm looking for a good idea.

I'll try to explain more specifically : i have a value (say 20) and a max (say 80) and i want to display the value as bar whose width is 20/80 = 25% of the width of its container. I want to do that only using HTML, CSS, 20 (the value) and 80 (the maximum). I have no data other than the value and the maximum so i cannot compute the percentage because i don't want no javascript or server side programming.

I think this is not possible but we never know.

Upvotes: 0

Views: 2245

Answers (3)

davnicwil
davnicwil

Reputation: 31015

You've sort of answered your own question, except you've assumed your answer is wrong. It's not. You should do this with a percentage in your css.

If you know the value and maximum in advance, then by definition you know the percentage width of the inner <div> in advance because it's a function of value and maximum.

Upvotes: 1

Derek 朕會功夫
Derek 朕會功夫

Reputation: 94379

style="width: -prefix-calc(20/80 * 100%)"

This should work in all modern browsers including internet explorer.

Demo: http://jsfiddle.net/aN9WW/

Upvotes: 4

G-Cyrillus
G-Cyrillus

Reputation: 106048

you have in HTML5 a tag for this :

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

http://codepen.io/anon/pen/rejdJ

Upvotes: 1

Related Questions