How can I add label inside a progress bar tag?

Use CSS's position:relative to manoeuvre the text onto the bar.

A quick and dirty solution for a short bar is:

position: relative;
left: -100px;

where left forces the text that would be next to the bar on top of it.

In the comments, Matthias made the point that left doesn't work if the progress bar is 100% width.

It doesn't work because it forces the text below the bar. It'll fail for any width of bar sufficient to force the text below.

Instead you have to get a bit more clever and do something like:

    position: relative;
    top: -1.5em;
    margin-left: 50%;

Here the top:-1.5em replaces the left adjustment in the jsFiddle. The margin-left is an attempt to centre the text. It should actually be a little less than 50%.

If someone has a better solution to centre the text on the bar that's less hacky than the hand-wavy 50%ish margin feel free to comment on it and I'll adjust this again.

I attempted to do this myself and finally came across a workaround.

Using the pseudo element :before you can do it a different way

You use content: attr(value) like this: https://jsfiddle.net/96z0gwv7/1/ - more CSS styling on link

progress
{
  text-align:center;
}

progress:before {
  content: 'Value is ' attr(value);
}

<progress value="6" max="10"></progress>
<progress value="9" max="10"></progress>

If you're not wanting the same text format each time then you could use the data attribute (i.e data-label)

.unique:before {
   content: attr(data-label);
}

<progress class="unique" value="9" max="10" data-label="90% completed"></progress>
<progress class="unique" value="0" max="10" data-label="About to begin"></progress>