There are a number of existing threads on the Twine Forum which explain possible methods that can be used to display and update a 'bar' in SugarCube:
a. Health bar in right side bar or in a status passage
b. Live Countdown Bar
I suggest reading the whole of each thread before using either solutions, both of those solutions can be modified to work with a progress element instead.
Break down of why your existing example does not work:
The bar has a value of 0 when used in the story
Actually if you use your web-browser's Developer Tools to Inspect the HTML being generated for the progress element in your Passage you will see that has a value of $vit which is invalid so the bar is defaulting to zero.
There are two main issues with your example:
1. When the Passage content is processed the $vit reference is not being substitute with the current value of that variable. There are a number of methods that can be used to get around this issue, the simplest is to use a <<print>> macro to dynamically create the progress element.
<<print '<progress id="energy" value="' + $vit + '" max="100"></progress>'>>