Here's the code I normally use for making bars. I can't get it to work in the StoryCaption special passage, though, and I'd love to know why, so maybe someone else can help with that. Anyway:
In JavaScript:
setup.createBar = function (val, max, loc, width) {
var $wrapper = $(document.createElement('div'));
var $bar = $(document.createElement('div'));
val = (val > max) ? max : val;
var actual = (val > 0) ? Math.trunc(val / max * 100) : 0;
$bar
.addClass('bar-actual')
.css('width', actual + '%');
$wrapper
.addClass('bar-container')
.append($bar)
if (width) {
$wrapper.css('width', width);
}
postdisplay['create-bar-task'] = function (t) {
$(loc).append($wrapper);
delete postdisplay[t];
};
};
In CSS:
.bar-container {
height: 1em;
background-color: #000; /* maybe? */
}
.bar-actual {
height: 1em;
background-color: green;
width: 0;
}
Usage:
<span id='target'></span> /% the bar will be rendered here, into this element %/
<<run setup.createBar(value, maxValue, '#target', [optional: width])>>
Example:
::StoryInit
<<set $progress to 0>>
<<set $maxProgress to 25>>
::TestPassage
<span id='prog'></span>\
<<run setup.createBar($progress, $maxProgress, '#prog');>>
<<button [[Increase Progress|TestPassage]]>>
<<set $progress++>>
<</button>>
Again, I can't for the life of me figure out why this won't work in StoryCaption, so hopefully someone else will come along and help with that; my brain's too fried to figure it out right now.