progress vs meter

dabblet.css

/* progress vs meter

What you see is a "live" view as rendered by your browser, no styles added */
@charset 'UTF-8';

/* styles for this demo */
/* skin */
body > * { max-width:600px; display:block; margin:1em auto; color:rgba(255,255,255,.9) }
h1 { font-size:1.6em }
a { color:#6bf; white-space:nowrap }
hr { text-align:center; border:0; margin:2.6em auto }
hr:after { content:'\2767'; font-size:1.6em }
blockquote { font-size:large; border-left:1px solid; padding-left:1em }

body { font:100%/1.6 Segoe UI,Helvetica Neue,Helvetica,sans-serif;
 background:linear-gradient(orange, red) }
html,body { min-height:100% }

[rel=author]{ display:block; margin:2.6em 0; border-top:1px dashed; padding:.6em 0; text-align:right }
[rel=author]:before { content:'—' }
[rel=author]:after { content:', 2014' }

aside { font-size:smaller; text-align:right }

dabblet.html

<aside>select <code>Result</code> to see only the article ↑</aside>

<h1>Progress vs Meter</h1>

<p> This is a minimal implementation for the &lt;progress> element</p>
<progress value=".62">your browser does not support this element</progress>
<pre>&lt;progress value=.62>&lt;/progress></pre>

<hr>

<p> This is the &lt;meter> element</p>
<meter value=62 max=100>your browser does not support this element</meter>
<pre>&lt;meter value=62 max=100>&lt;/meter></pre>

<hr>

<p> The <a href="//www.w3.org/html/wg/drafts/html/master/forms.html#the-meter-element">
	W3C <code>meter</code> Specification</a> says:
<blockquote>
	The meter element should not be used to indicate progress (as in a progress bar).
	For that role, HTML provides a separate progress element.
</blockquote>
<p> I think it means: &ldquo;Use <code>progress</code> if you expect it to move&rdquo;.

<hr>

<p> If your target browser does not support it, you can use a 
<a href="https://github.com/LeaVerou/HTML5-Progress-polyfill"> <code>progress</code> polyfill</a>
or a <a href="https://github.com/jonstipe/meter-polyfill"><code>meter</code> polyfill</a>.
<a rel=author href=//github.com/brito>brito</a>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}