Créer une barre de progression avec le compte à rebours JS

Question

J'essaye de créer une barre de progression avec le compte à rebours JS, j'en ai besoin quand il atteint 00 00 00 00 la barre de progression est 100% et la barre avance quand ce compteur est descendre à temps. Merci!

Le code actuel est le suivant:

// ================================================================================= 
 
// Countdown Timer 
 
// ================================================================================= 
 

 
var ctd = document.getElementById("countdown"); 
 
countdown(); 
 
function countdown() { 
 
    // Contador ...... 
 
    var launch_date = new Date("9, 28, 2017 7:07:00"); 
 
    var days; 
 
    var hours; 
 
    var minutes; 
 
    var seconds; 
 
    var rest; 
 
    var now = new Date(); 
 
    seconds = rest = Math.floor((launch_date.getTime() - now.getTime())/1000); 
 
    days = zero(Math.floor(seconds/86400)); 
 
    seconds -= days * 86400; 
 
    hours = zero(Math.floor(seconds/3600)); 
 
    seconds -= hours * 3600; 
 
    minutes = zero(Math.floor(seconds/60)); 
 
    seconds -= minutes * 60; 
 
    seconds = zero(Math.floor(seconds)); 
 
    function zero(n) { 
 
    return (n < 10 ? "0" : false) + n; 
 
    } 
 
    rest <= 0 
 
    ? (days = hours = minutes = seconds = "00") 
 
    : setTimeout(countdown, 1000); 
 
    ctd.innerHTML = 
 
    '<li><div><span class="countnumber">' + 
 
    days + 
 
    "</span><br> Dia" + 
 
    (days > 1 ? "s" : "") + 
 
    "</div></li>" + 
 
    '<li><div><span class="countnumber">' + 
 
    hours + 
 
    "</span><br> Hora" + 
 
    (hours > 1 ? "s" : "") + 
 
    "</div></li>" + 
 
    '<li><div><span class="countnumber">' + 
 
    minutes + 
 
    "</span><br> Minuto" + 
 
    (minutes > 1 ? "s" : "") + 
 
    "</div></li>" + 
 
    '<li class="color"><div><span class="countnumber">' + 
 
    seconds + 
 
    "</span><br> Segundo" + 
 
    (seconds > 1 ? "s" : "") + 
 
    "</div></li>"; 
 
}

<div class="countdown"> 
 
    <ul id="countdown"></ul> 
 
</div>

Answer 1

Nous ne ferons pas votre travail ici sur le SO. Recherche, écrivez du code et si vous avez des problèmes, vous pouvez demander ici.

De toute façon, vous pouvez facilement réaliser cela en utilisant un div, que vous redimensionnez selon vos besoins (définissez la largeur à quelle largeur vous le souhaitez) et définir une bordure dessus. Comme ceci:

.bar { 
 
    border-bottom: 2px solid green; 
 
}

<div class="bar" style="width: 200px;"></div> 
 
<br/> 
 
<div class="bar" style="width: 300px;"></div>

Il suffit de définir sa largeur en fonction de votre minuterie.