google_online
@google_online
My morning begins with coffee and Twitter.

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

Есть простой прогрессбар и две кнопки. По нажатию на любую из этих двух кнопок, прибавляется 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') // тут нужно покрасить только один шаг
            })
        })
  • Вопрос задан
  • 290 просмотров
Решения вопроса 1
0xD34F
@0xD34F Куратор тега CSS
<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/
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы