Как залить фон на 25%?

Question

[Александр Андропов]

Доброго времени суток, чтобы залить элемент, я использую например:

background: linear-gradient(to right, #8dff80, #57c53b);

А как залить например 25% элемента или 50% ?
В общем, сделать своеобразный простейший прогресс-бар как правильно ?

Answer 1

[Ankhena]

Для простейшего прогресс бара есть тег <progress>

Для градиента так и написать, указав точки перехода:

background: linear-gradient(to right, #8dff80 25%, #57c53b 25%);

Если это регулируется через JS, то разумнее делать это через кастомные свойства.

Comments

[Александр Андропов]

Тег не совсем подходит, мне нужно Div элемент залить на 25% - 50% и так далее.

background: linear-gradient(to right, #8dff80 25%, #57c53b 25%);

Заливает именно степень градиента, а мне нужно что-то примерно из этого:

[Ankhena]

Александр Андропов,

Заливает именно степень градиента, а мне нужно что-то примерно из этого:

Я вообще люблю такие вопросы. Сначала спросить одно, а потом допридумывать какие-то условия.

В смысле двойной градиент, чтобы внизу темным было?
Ну задайте ему bg size, чтобы не на всю ширину был, а на сколько вам нужно.

[Александр Андропов]

Ankhena, Этот вопрос изначально и был, если вы прочтете его

[Ankhena]

Александр Андропов, я ведь не могла подумать, что вы просто не знаете про background-size
https://jsfiddle.net/erby7Lwq/

[Александр Андропов]

Ankhena, спасибо за помощь.

[Ankhena]

Александр Андропов, Для progress https://jsfiddle.net/yumvtx4z/