CODEWITHSUNDEEP
htmldomgoogle-chrome
Silviu-Marian
Silviu-Marian

Reputation: 10927

HTML5 progress element not rendering any child elements?

Code is: 

 <progress max="100" value="100">100%</progress>

That 100% either wrapped in span tags, p's, div's, other progresses, nothing ever makes it get displayed. On both Chrome and Opera, running on W7x64.

Is this default behavior? Should I write on top of the progress bar with position:absolute?

Upvotes: 1

Views: 995

Answers (2)

Silviu-Marian
Silviu-Marian

Reputation: 10927

Turns out the content inside the <progress> tag is fallback for browsers who don't support HTML5.

http://lea.verou.me/2011/07/a-polyfill-for-html5-progress-element-the-obsessive-perfectionist-way/

Upvotes: 1

ebidel
ebidel

Reputation: 24109

The inner content of a <progress> will only render in browsers that do not support it.This is similar behavior to <video>, <canvas>, etc. Both Chrome and Opera support <progress>.

If you want to render the percentage alongside the progress bar itself, try to use ::after and data attributes. Sort of a poor man's data binding:

<style>
#progress:after {
  content: attr(data-percent) '%';
  margin-left: 5px;
}
</style>

<div id="progress" data-percent="10">
  <progress max="100" value="10" min="0"></progress>
</div>

You'd have to add an change listener to update data-percent when the progress's value changes.

See: http://jsbin.com/asuqow/edit#html,live

Upvotes: 1

Related Questions