Setting the HTMLH progress bar innerHTML

Question

I have a simple progress bar <progress value="22" id = "timerProgress"></progress>

I managed to change its value using jQuery, but I would like to write text like Remaining : 10 secINSIDE, progress bar.

I tried innerHTML and html properties, but this did not work.

How to do it?

Answer 1

You can use the "before" or "after" CSS pseudo-element (NB: at the moment, this approach only works in Chrome):

progress:before {
  content:attr(value);
}

Or create another attribute and update it from your JavaScript:

<progress value="22" id="timerProgress" data-content="Remaining : 10 sec"></progress>

progress:before {
  content: attr(data-content);
}

var secondsRemaining = 10;
document.getElementById('timerProgress').setAttribute('data-content', 'Remaining : ' + secondsRemaining + ' sec');

Fiddle: http://jsfiddle.net/imcg/v4xEB/

Answer 2

, . , - ( Safari).

http://jsfiddle.net/smt6J/

HTML

<div id="progress">
    <progress max="100" value="22" class="progressBar"></progress>
    <div class="progressText">22% Done</div>
</div>

JQuery

$('#progress .progressBar').val(50);
$('#progress .progressText').text('50% Done');

CSS

#progress {
    position:relative;
}
#progress .progressBar {
    position: absolute;
    left:0;
    top:0;
}
#progress .progressText {
    position: absolute;
    left:0;
    top:0;
}