HTML 5 прогресса бар тег с градиентом в качестве фона

Question

Я хочу, чтобы стиль бара тег прогресса html5 следующим образом: сама

Бара фон должен быть градиентом с фиксированной шириной 100%. Но градиент должен быть просто видно, где значение бара ...

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

Что я помещал в стиле для значения, или я могу сделать что-то еще?

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

Или, может быть, какое-то перевернутая CSS маскирования?

Спасибо за помощь!

Answer 1

Хорошо, я решил это с помощью обходного пути.

я повернуть индикатор на оси Y с:

> transform: rotateY(180deg); 

Затем я установил фоновое значение унаследованное фон для того, чтобы сделать его полностью прозрачным.

Теперь, на последнем шаге, в вычислении моего значения я инвертировал значения. Так что value="100" представляет собой пустой индикатор выполнения в DOM, а value="0" представляет собой полный индикатор выполнения (100%).