You could use @ HTML Attribute Directive to make your progress meter use the associated variable as part of the calculation of the related span element's width.
<div class="progress-bar orange stripes shine glow" id="energy">\
<span @style="'width: ' + (($player.energy / 5) * 100) + '%'"></span>\
</div>
... then you could use information gained from this answer by TheMadExile to refresh the whole of the StoryCaption area.
<<link "Increase Player Energy by 2">>
<<set $player.energy to Math.clamp($player.energy + 2, 1, 5)>>
<<replace "#story-caption">><<include "StoryCaption">><</replace>>
<</link>>
... or a modified version of the above to only refresh the Energy progress meter.
<<link "Increase Player Energy by 2">>
<<set $player.energy to Math.clamp($player.energy + 2, 1, 5)>>
<<replace "#energy">><span @style="'width: ' + (($player.energy / 5) * 100) + '%'"></span><</replace>>
<</link>>
Both the first of my examples and the bodies of both my <<link>> macro calls could be embedded within widgets.