CSS: линейный градиент со значением переменной из атрибута ⇐ CSS

[Anonymous]

Я хочу управлять линейным градиентом на основе значения атрибута. Мой HTML:

Код: Выделить всё

Мой CSS:

Код: Выделить всё

.percentage {
width: 100px;
border: .1px solid;
border-radius: 2px;
font-size: 1rem;
padding: 1px;
background-clip: content-box;
background-image: linear-gradient(
to right,
#cccc 50%,
transparent 0%
);
}

.percentage::before {
content: attr(data-percentage);
}

Это работает. Что не работает, так это управлять линейным градиентом с помощью значения атрибута:

Код: Выделить всё

background-image: linear-gradient(
to right,
#cccc attr(data-percentage),
transparent 0%
);

Похоже, что доступ к attr() внутри линейного градиента() невозможен? Как я могу управлять линейным градиентом на основе значения атрибута?
https://jsfiddle.net/07gd82oe/

Подробнее здесь: https://stackoverflow.com/questions/798 ... -attribute