Setting innerHTML of HTML progress bar

Question

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

I have managed to change its value using jQuery but I'd like to write text like Remaining : 10 sec INSIDE the progress bar.

I tried the innerHTML and the html properties but that didn't work out.

How to go about it?

The progress element can't have content like that

adeneo
– adeneo

2014-03-05 22:37:15 +00:00
Commented Mar 5, 2014 at 22:37 — adeneo
– adeneo, Commented Mar 5, 2014 at 22:37

Barbara Laird · Accepted Answer · 2014-03-05 22:52:10Z

3

I think you have to add another element. I tried using a pseudo element on the progress bar, but for some reason it didn't work (only tried in 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;
}

answered Mar 5, 2014 at 22:52

Barbara Laird

12.7k2 gold badges48 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Kanishka Ganguly Over a year ago

This looks promising! Thanks! :) Will try it out.

imcg · Accepted Answer · 2014-03-05 23:46:00Z

0

You could use the 'before' or 'after' CSS pseudo element (NB: at this time, this approach appears to work in Chrome only):

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

Or create another attribute and update that 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/

edited Mar 5, 2014 at 23:46

answered Mar 5, 2014 at 22:56

imcg

2,6491 gold badge21 silver badges13 bronze badges

4 Comments

Kanishka Ganguly Over a year ago

Now, how would I go about changing text color and all that?

imcg Over a year ago

Added a fiddle to the answer. Does work (in Chrome), but not 100% sure about browser support

Barbara Laird Over a year ago

That doesn't work in Safari or Firefox for me. Does work in Chrome. I don't have IE installed, so I can't check.

imcg Over a year ago

@BarbaraLaird Yes you're right :before only seems to work in Chrome for the progress element. Going to add a warning. Thanks.

Collectives™ on Stack Overflow

Setting innerHTML of HTML progress bar

2 Answers 2

1 Comment

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related