css - HTML 5 progress bar tag with gradient as background -


i want style html5 progress bar tag following:

the bar background should gradient fixed 100% width. gradient should visible value of bar is...

progress[value]::-webkit-progress-bar {   background: linear-gradient(to right, red 1%, green); } 

what put in style value, or can else?

  progress[value]::-webkit-progress-value {     //some code here   } 

or maybe kind of inverted css masking?

thanks kind of help!

ok, solved workaround.

i rotate progress bar on y axis with:

> transform: rotatey(180deg); 

then, set value background inherited background in order make transparent.

now, last step, in value calculation inverted values. value="100" represents empty progress bar in dom , value="0" represent full (100%) progress bar.


Comments

Popular posts from this blog

python - How to insert QWidgets in the middle of a Layout? -

python - serve multiple gunicorn django instances under nginx ubuntu -

module - Prestashop displayPaymentReturn hook url -