How do you make a progress bar saying and updating the progress you are on?

Answer 1

Well, it's not often as simple as the theory suggested by @Saka Oluwadamilola ;P

What kind of 'progress' would you like to design?
+ In case of progress of a computation job, you need to have to way to know its progress status relatively to the total to be done (could be the iterating index if all the job is embed in a loop) and to do it asynchroniously to be able to refresh display during computation and not only at its end...
+ In case of asynchronious status of progress (like a scolling value, a page step...) you just need to update the 'value' attribute of the <progress> element, and eventually its innerHTML content to display something over the <progress> element...

Anyway, be careful that @Saka Oluwadamilola way of selecting element will select the first one 'span' (index 0) of all <span>s elements childs of the targeted <progress> (the one selected by getElementById() method) ^^

Answer 2

For a progress bar showing percentage of an action the user has completed:

HTML Code:

<progress id='bar' max='100'><span>0</span>%</progress>

JavaScript to update it:

var Bar = document.getElementById('bar');
var updateProgress = function(value) {
  Bar.value = value;
  Bar.getElementsByTagName('span')[0].innerHTML = value;
}