[Custom Sheet] Progress Bar Element

I've found that the progress bar element in the custom sheets do not show up. Has anyone else tried using this element?
https://www.w3schools.com/tags/tag_progress.asp
I'm using Chrome Version 65.0.3325.162 (Official Build) (64-bit)

I can recreate the issue by simple going to custom character sheet

<progress value="5" max="10"></progress>

I'm guessing the sheets simply don't support this element?

haha, i'am a web developper and i didn't know this tag -_-"

To create a custom progress bar, i use css and sheet worker to update an hidden field:
HTML:

<input type="hidden" value="0" name="attr_Character_overweight" class="sheet-hidden sheet-overweight">
<div class="sheet-overweight">
</div>

CSS :

div.sheet-overweight {
    width: 90%;
    height: 20px;
    border: 1px solid black;
    color: black;
    text-align: center;
}
input.sheet-overweight[value="0"] ~ div.sheet-overweight {
    background: white;
}
input.sheet-overweight[value="1"] ~ div.sheet-overweight {
    background: linear-gradient(to left, white 60%, green 75%);    
}
input.sheet-overweight[value="2"] ~ div.sheet-overweight {
    background: linear-gradient(to left, white 40%, yellow 75%);
}
    input.sheet-overweight[value="2"] ~ div.sheet-overweight:before {
        content:"Bags half full";
    }
input.sheet-overweight[value="3"] ~ div.sheet-overweight {
    background: linear-gradient(to left, white 20%, orange 75%);
}
    input.sheet-overweight[value="3"] ~ div.sheet-overweight:before {
        content: "Bags nearly full";
    }
input.sheet-overweight[value="4"] ~ div.sheet-overweight {
    background: linear-gradient(to left, white, red 100%);
}
    input.sheet-overweight[value="4"] ~ div.sheet-overweight:before {
        content: "Bags full !";
    }
input.sheet-overweight[value="5"] ~ div.sheet-overweight {
    background: black;
    color: white;
}
    input.sheet-overweight[value="5"] ~ div.sheet-overweight:before {
        content: "Bags too heavy !";
    }

That's pretty clever, Kaias. I think I'll be using that.

Do you mind if I add that to the CSS Wizardry page on the wiki?  Very slick.

This is absolutely helpful, the only major problem to sort out is that the max value of the bar is dynamic depending on several other values. and that it also needs many many more segments.

Vince said:

Do you mind if I add that to the CSS Wizardry page on the wiki?  Very slick.

i'd be glad to contribute :D

DriftingNitro, can you try to describe your project ?

Kaias C. said:

Vince said:

Do you mind if I add that to the CSS Wizardry page on the wiki?  Very slick.

i'd be glad to contribute :D

Done: https://wiki.roll20.net/CSS_Wizardry#Custom_Progre...

Kaias C. said:

Vince said:

Do you mind if I add that to the CSS Wizardry page on the wiki?  Very slick.

i'd be glad to contribute :D

DriftingNitro, can you try to describe your project ?

The project, or at least this part of the project is as follows:
https://jsfiddle.net/nk0y2qe7/73/
This JS fiddle link will show more of what I'm doing. Sorry I didn't open with this.
You'll have to excuse the excess CSS stuff that's referring to other parts of the character sheet.
The 'health bar' CSS is at the bottom of the CSS section.

I'm working on a custom character sheet, and have an injury system that also doubles as a psuedo HP system. How it plays mechanically in the game is that your max "HP" is your 10+con+half your prof bonus, so it changes.

The bar is to represent, roughly how close you are to dying. It's for styling, and to make the screen more visually interesting. I'm willing to compromise with setting the bar to have values between 1 and 20, and it simply won't exceed the value that the 'health_max' is.

As it stands I  have the formulas how I want them, I'm trying to add the bar above the anatomy chart to try and enhance the sheet visually.



EDIT: and just to clarify, I have been testing in roll20, here is how this current implementation looks.


EDIT 2: Needed to put

disabled="true"

on the hidden attribute for current health, my bad.




But in any case the changing maximum is something I'm just willing to compromise on if there isn't a better way to implement. Maybe something involving percentages would work?

If you have set values 0-20, you could use a or autocalc value to calculate floor((current / max) * 20) and use that as the input value.

It's also possible you might be able to use a range input, but I have never tried that so it may not work, or may only work in certain browsers. But if it does work as expected, the "thumb" in the middle of the bar would move whenever the value is adjusted, instead of having to set up a bunch of CSS rules to move the apparent value.

edit: fixed my suggested formula, I had min instead of current before.

I'd like to keep it a bar for aesthetic but the auto calc value is a good solution, thank you.

Ziechael said:

off-topic but I notice that you've misspelt "Bludgeoning" in your code :)
I'm a professional pedant... sorry...

Bless you, I will not have to receive a berating from the rapscallion in my game group.

Just another picky observation your player may make: Looking at the diagram as a face-on view of the person, the person's left arm and left leg should actually be on the right side of the image (and vice versa).