HTML5 style that peaked

Question

Is it possible to create a progress panel that has differently reached its maximum value in CSS than one that is not already running or running?

for example, something like

progress[max=value] { background: green // color when maxed out } progress { background: red;//default color } 

Or do I need to use Javascript to detect it?

Answer 1

I would also like to see some pseudo-class for the finished state of the <progress> element, because the browser (both Chrome and Firefox on OS X) already knows when it will finish, and will accordingly change the appearance.

Unfortunately, the only <progress> pseudo-class seems to support :indeterminate , i.e. value not set.

You can, of course, use JavaScript and add your class yourself (but you cannot even listen to the change event on <progress> ):

 var progress = document.querySelector('progress'); // then somewhere inside a callback if (progress.value === progress.max) { progress.classList.add('finished'); } else { progress.classList.remove('finished'); } 

Demo: http://jsfiddle.net/AFzYU/

Answer 2

This answer assumes that we know the maximum value of the progress bar. I will use the following markup:

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

Here, our performance limit has a maximum value of 100 and a value of 100, that is, it is in a completed state. From this we can use the [att = val] selector for its purpose in its completed state:

 progress[value="100"] { ... } 

Chris Coyier has an article on CSS tricks that explains how the progress element can be created in Chrome, Firefox, and IE10. After that, we can apply the style to the completed progress bar. First we reset the style:

 progress[value="100"] { -webkit-appearance: none; -moz-appearance: none; appearance: none; } 

Then we can specifically apply the style to ::-webkit-progress-value and ::-moz-progress-bar to customize the foreground execution plan on both Chrome and Firefox. To do this, I set the background color #f00 (red):

 /* Chrome */ progress[value="100"]::-webkit-progress-value { background:#f00; } /* Firefox */ progress[value="100"]::-moz-progress-bar { background:#f00; } 

Finally, we can add the IE10 style by simply adding the color property to the main selector:

 progress[value="100"] { -webkit-appearance: none; -moz-appearance: none; appearance: none; /* IE10 */ color:#f00; } 

Here is a JSFiddle demo demonstrating this with two progress bars - the first at 50% and the second at 100%. For laziness, here is the result in Chrome, Firefox, and IE10: