Using data attribute in css3 color

Question

I am trying to color the progress bar depending on the value.

progress[value]::-webkit-progress-value { position: relative; background-color: rgba(0, attr(value) ,0,1); background-size: 35px 20px, 100% 100%, 100% 100%; border-radius:3px; /* Let animate this */ animation: animate-stripes 5s linear infinite; } 

Attr (value) doesn't seem to work - is there a way to insert the value there? Chrome use

Answer 1

If you use a pseudo-element earlier to display your progress? Maybe this might work?

 progress[value]::-webkit-progress-value { &:before{ content: [attr-data]; display: block; position: relative; background-color: rgba(0, attr(value) ,0,1); background-size: 35px 20px, 100% 100%, 100% 100%; border-radius:3px; /* Let animate this */ animation: animate-stripes 5s linear infinite; } }