Имеется 4 item`a, ширина каждого 20% (от ширины контейнера). Как сделать заливку контейнера, зная процент от числа?

Question

[Miron4ek_228]

Вот код - https://codepen.io/Menson/pen/JjOMZrv

Верхняя заливка должна соответствовать нижней.

200 - это 100%, число слева - прогресс.

Заливка должна соответствовать прогрессу (то есть при 55% прогресса - 55% ширины контейнера должно иметь красный цвет). Проблема в том, что в первом варианте контейнер делится на 4 части, а я понятия не имею какая формула бы подошла для этого случая.

Мой вариант не подходит разумеется.

Answer 1

[Pavel]

Вариант с разбивкой через css не подойдет ? накидал немного
https://codepen.io/shutik-the-encoder/pen/xxPYwgM
или именно заполнение каждого элемента отдельно нужно ?

Answer 2

[twobomb]

Если отступы между палками не считать , то можно так

let conts = [line1,line2,line3,line4];
let w = 100/conts.length;
for(let i = 0; i < conts.length;i++)  
  conts[i].style.width = progressResult- w*i < 0?0:Math.min(w,progressResult- w*i)/w * 100 + "%";

Answer 3

[Андрей Галкин]

Есть вот такой вариант, немного переработал Html для удобства: Код тут