How to use `currentColor` in linear-gradient

Question

I want to use currentColor to show progress bar progression from the left.

In the example below I am using the background of the progress bar instead of the actual color of the progress bar.

https://jsfiddle.net/nick1111/tc4r0net/13/

 progress[value] { /* Reset the default appearance */ -webkit-appearance: none; appearance: none; width: 250px; height: 20px; } progress::-webkit-progress-value { background: linear-gradient(to left, currentColor, rgba(255, 255, 255, .1)); }

 <div style="color:green;"> <div> <progress value="80" max="100">70 %</progress> </div> </div>

How can I use currentColor instead of rgba(255,255,255,.1) ?

Thanks

Answer 1

You can try something like this. The idea is to use two gradient to simulate this behavior:

 progress[value] { /* Reset the default appearance */ -webkit-appearance: none; appearance: none; width: 250px; height: 20px; } progress::-webkit-progress-value { background: linear-gradient(to left, transparent, rgba(128,128,128,0.9)), linear-gradient(currentcolor, currentcolor); }

 <div style="color:blue;"> <div> <progress value="80" max="100">70 %</progress> </div> </div> <div style="color:green;"> <div> <progress value="80" max="100">70 %</progress> </div> </div> <div style="color:white;"> <div> <progress value="80" max="100">70 %</progress> </div> </div>