Hi, I want to share a progress bar that I made. It is feels really smooth and has a simple template that can be customized and applied anywhere in the character sheet: HTML: ...
<div>
<input name='attr_progress_bar_wound' type='hidden'/>
<div class="sheet-progress_bar-w sheet-progress_bar-color_green"></div>
<span>Wound</span>
</div>
... CSS: .charsheet *:has(> .sheet-progress_bar-w),
.charsheet *:has(> .sheet-progress_bar-h) {
position: relative;
}
.charsheet .sheet-progress_bar-w {
position: absolute;
left: 0;
width: 0%;
height: 100%;
transition: width 1s;
}
.charsheet .sheet-progress_bar-h {
position: absolute;
bottom: 0;
width: 100%;
height: 100%;
max-height: 0%;
transition: max-height 1s;
}
.charsheet .sheet-progress_bar-w + span,
.charsheet .sheet-progress_bar-h + span {
position: absolute;
}
.charsheet .sheet-progress_bar-w.sheet-progress_bar-color_red,
.charsheet .sheet-progress_bar-h.sheet-progress_bar-color_red {
background-color: darkred;
}
.charsheet .sheet-progress_bar-w.sheet-progress_bar-color_green,
.charsheet .sheet-progress_bar-h.sheet-progress_bar-color_green {
background-color: darkgreen;
}
/* More colors if you want */
.charsheet input[value="0"] + .sheet-progress_bar-w { width: 0%; }
.charsheet input[value="5"] + .sheet-progress_bar-w { width: 5%; }
.charsheet input[value="10"] + .sheet-progress_bar-w { width: 10%; }
.charsheet input[value="15"] + .sheet-progress_bar-w { width: 15%; }
.charsheet input[value="20"] + .sheet-progress_bar-w { width: 20%; }
.charsheet input[value="25"] + .sheet-progress_bar-w { width: 25%; }
.charsheet input[value="30"] + .sheet-progress_bar-w { width: 30%; }
.charsheet input[value="35"] + .sheet-progress_bar-w { width: 35%; }
.charsheet input[value="40"] + .sheet-progress_bar-w { width: 40%; }
.charsheet input[value="45"] + .sheet-progress_bar-w { width: 45%; }
.charsheet input[value="50"] + .sheet-progress_bar-w { width: 50%; }
.charsheet input[value="55"] + .sheet-progress_bar-w { width: 55%; }
.charsheet input[value="60"] + .sheet-progress_bar-w { width: 60%; }
.charsheet input[value="65"] + .sheet-progress_bar-w { width: 65%; }
.charsheet input[value="70"] + .sheet-progress_bar-w { width: 70%; }
.charsheet input[value="75"] + .sheet-progress_bar-w { width: 75%; }
.charsheet input[value="80"] + .sheet-progress_bar-w { width: 80%; }
.charsheet input[value="85"] + .sheet-progress_bar-w { width: 85%; }
.charsheet input[value="90"] + .sheet-progress_bar-w { width: 90%; }
.charsheet input[value="95"] + .sheet-progress_bar-w { width: 95%; }
.charsheet input[value="100"] + .sheet-progress_bar-w { width: 100%; }
.charsheet input[value="0"] + .sheet-progress_bar-h { max-height: 0%; }
.charsheet input[value="5"] + .sheet-progress_bar-h { max-height: 5%; }
.charsheet input[value="10"] + .sheet-progress_bar-h { max-height: 10%; }
.charsheet input[value="15"] + .sheet-progress_bar-h { max-height: 15%; }
.charsheet input[value="20"] + .sheet-progress_bar-h { max-height: 20%; }
.charsheet input[value="25"] + .sheet-progress_bar-h { max-height: 25%; }
.charsheet input[value="30"] + .sheet-progress_bar-h { max-height: 30%; }
.charsheet input[value="35"] + .sheet-progress_bar-h { max-height: 35%; }
.charsheet input[value="40"] + .sheet-progress_bar-h { max-height: 40%; }
.charsheet input[value="45"] + .sheet-progress_bar-h { max-height: 45%; }
.charsheet input[value="50"] + .sheet-progress_bar-h { max-height: 50%; }
.charsheet input[value="55"] + .sheet-progress_bar-h { max-height: 55%; }
.charsheet input[value="60"] + .sheet-progress_bar-h { max-height: 60%; }
.charsheet input[value="65"] + .sheet-progress_bar-h { max-height: 65%; }
.charsheet input[value="70"] + .sheet-progress_bar-h { max-height: 70%; }
.charsheet input[value="75"] + .sheet-progress_bar-h { max-height: 75%; }
.charsheet input[value="80"] + .sheet-progress_bar-h { max-height: 80%; }
.charsheet input[value="85"] + .sheet-progress_bar-h { max-height: 85%; }
.charsheet input[value="90"] + .sheet-progress_bar-h { max-height: 90%; }
.charsheet input[value="95"] + .sheet-progress_bar-h { max-height: 95%; }
.charsheet input[value="100"] + .sheet-progress_bar-h { max-height: 100%; }
JS: function updateProgressBar(name, current, max) {
setAttrs({
[name]: Math.min( Math.max( Math.round( current / max * 0.2 * 100 ) * 5, 0 ), 100 ), });
}
on('change:wounds change:wounds_max', function(e) {
getAttrs(['wounds', 'wounds_max'], function(values) {
updateProgressBar("progress_bar_wound", values.wounds, values.wounds_max)
});
});
