Progress bar

Door Klaas Sjaak op 07-12-2019 18:34

1.530 views

Hallo allemaal,

Ik probeer een progressiebar te maken mbv jquery en css, maar het lukt me niet om de progressiebar te laten teruglopen alleen het aftellen gaat wel goed.

js:


function progress(timeleft, timetotal, $element) {
    var progressBarWidth = timeleft * $element.width() / timetotal;
    $('div.progress-bar').animate({ width: progressBarWidth }, timeleft == timetotal ? 0 : 1000, 'linear').html(timeleft+" s");
    if(timeleft > 0) {
        setTimeout(function() {
            progress(timeleft - 1, timetotal, $element);
        }, 1000);
    }
};
progress(300,300,$('div.progress-bar'));

css:


.progress {
    margin-top: 3px;
    display: block;
    float: right;
    width: 100%;
    background-color: #19191E;
    height: 20px;
    margin-bottom: 20px;
    overflow: hidden;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);
}

.progress .progress-bar {
    width: 100%;
    background: #60d600;
}

html:

<div class="progress"><div class="progress-bar"><span>time left</span></div></div>

Wat doe ik verkeerd?