Как изменить цвет шага в прогресс баре?

Question

[Mike]

Есть простой прогрессбар и две кнопки. По нажатию на любую из этих двух кнопок, прибавляется 1 шаг в прогрессбаре. Как сделать чтобы этот самый шаг изменял свой цвет, не весь прогрессбар а только шаг. Если нажать на кнопку 'red' то шаг сделать красным цветом а если на кнопку 'green'
соответственно сделать его зелёным цветом.
Тут мой код, но он перекрашивает весь прогрессбар, что не есть гуд.

#progressBar {
            width: 500px;
            height: 6px;
            border-radius: 10px;
            background: #435C91
        }
        #pd {
            width: 0%;
            height: 5px;
            border-radius: 10px;
}

<div id="Bar">
        <div id="progressBar">
            <div id="pd"></div>
        </div>
        <br>
        <button id="green">green</button>
        <button id="red">red</button>
    </div

$(document).ready(function() {

            proc = 0

            $('#green').click(function() {
                proc += 1
                $('#pd').css('width', proc + '%')
                $('#pd').css('background', 'green') // тут нужно покрасить только один шаг
            })
            $('#red').click(function() {
                proc += 1
                $('#pd').css('width', proc + '%')
                $('#pd').css('background', 'red') // тут нужно покрасить только один шаг
            })
        })

Comments

[Леонид Князев]

Сделайте сегментированный прогресс бар, и после нажатия кнопок добавляйте в него новый сегмет со своим цветом.

Answer 1

[0xD34F]

<div id="progressBar"></div>

<button>green</button>
<button>red</button>
<button>yellow</button>
<button>magenta</button>
<button>aqua</button>

let percent = 0;
const gradientParts = [];

$('button').click(function() {
  if (percent < 100) {
    const color = $(this).text();
    percent++;
    gradientParts.push(`${color} ${percent - 1}%`, `${color} ${percent}%`);
    const gradient = gradientParts.concat(`#435C91 ${percent}%`, '#435C91 100%');

    $('#progressBar').css({
      background: `linear-gradient(to right, ${gradient.join(', ')})`,
    });
  }
});

https://jsfiddle.net/2yqzgeLb/