So I have a template like this. (This is how it is once used - the second table)
My point is that I want to have a bar displayed once a value added using gradient. The lighter color will show how the progress goes, as opposite to 100% (displayed as darker color).
Example, I have the HP input as 60 (there are 5 other fields, not just the HP). The HP field should have the text displayed as 60. The maximum value of all these fields is 255, so it should display the number 60 on the field, and display the bright red color with the gradient percent like (100% * 60) / 255.
I only manage to make the number 60 display, but the gradient never shows up so I believe I mess up that part. I want to put the gradient percent to the gradient like the sample:
background: linear-gradient(to right, #FF0000 [percent calculation mentioned above]%, #FF5959 0px);
How should I put the calculation to the gradient?