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
Post a Comment