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') // тут нужно покрасить только один шаг
            })
        })
  • Вопрос задан
  • 74 просмотра
Решения вопроса 1
Пригласить эксперта
Ваш ответ на вопрос

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

Войти через TM ID
Похожие вопросы