Menu
Is there any possibility to color the progress tag in css? I tried it. But only width and height is working. I want to skin the color of progression (inner color which shows the percentage of download). Is it possible?
602
You can style the color of the bar in the <progress> element by changing the background of a few browser-proprietary selectors.
WebKit/Blink provides two pseudo classes to style the progress element: -webkit-progress-bar is the pseudo class that can be used to style the progress element container. In this demo we'll change the background color, border-radius and then apply inset box shadow to the progress element container.
<progress>: The Progress Indicator element. The <progress> HTML element displays an indicator showing the completion progress of a task, typically displayed as a progress bar.
Tips and Notes. Tip: Use the <progress> tag in conjunction with JavaScript to display the progress of a task. Note: The <progress> tag is not suitable for representing a gauge (e.g. disk space usage or relevance of a query result). To represent a gauge, use the <meter> tag instead.
This is what you are looking for:
progress[value] {color:red} /* IE10 */ progress::-webkit-progress-bar-value {background:red} progress::-webkit-progress-value {background:red} progress::-moz-progress-bar {background:red} It's working just fine on Chrome and Firefox 6.
IE10 also supports the ::-ms-fill pseudo-element.
100
Currently no. The design/look-and-feel of the progress bar is currently defined by the browser and CSS cannot style the progress bar.
My current solution to this is to use multiple divs to style and show a progress bar, using CSS sprite images.
25
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
