Animieren CSS Fortschrittsbalken ohne zwischen den Updates zu springen?

Question

ich das auf meiner Seite bin mit ...

<progress id='video-progress' min='0' max='100' value=''></progress> 

Dies ist das gesamte Styling des Elements ...

#video-progress { 
    -webkit-appearance: none; 
    border: none; 
    position:fixed; 
    bottom:0; 
    left:0; 
    height:3px; 
    width:100%; 
    z-index:1; 
} 

Also alles was man tut, ist Umzug von 0 bis 100% Bildschirmbreite auf der Unterseite der Seite. Der Fortschrittsbalken wird über Javascript aktualisiert.

Da aber mein Video 30 Sekunden lang ist, werden die einzelnen Schritte des Updates ausgeführt als „Sprünge“ für die Fortschrittsbalken. So gibt es keine glatte Bewegung der Bar.

Jede Idee, wie ich die Fortschrittsbalken oder glatt es zwischen den aktualisierten Schritten animieren könnte?

UPDATE:

JavaScript ...

function updateProgressBar() { 
    var progressBar = document.getElementById('video-progress'); 
    var percentage = Math.floor((100/fmVideo.duration) * fmVideo.currentTime); 
    progressBar.value = percentage; 
} 

Answer 1

Sie es durch Erhöhen animieren könnte sein value jeden 15 millisecondsetInterval mit und Erhöhen stoppen, wenn die value größer als percentageclearInterval Verwendung ist.

Dieser Code extrahiert die aktuelle value und erhöht sie, bis sie den Wert percentage erreicht.

Hinweis:percentage wird manuell auf 70 gesetzt.

var progressBar = document.getElementById('video-progress'); 
 

 
function updateProgressBar() { 
 
    var percentage = 70; 
 
    var curr = progressBar.value; 
 
    var update = setInterval(function() { 
 
    if (curr > percentage) { 
 
     clearInterval(update); 
 
    } 
 
    progressBar.value = curr++; 
 
    }, 15) 
 
} 
 

 
updateProgressBar();

#video-progress { 
 
    -webkit-appearance: none; 
 
    border: none; 
 
    position: fixed; 
 
    bottom: 0; 
 
    left: 0; 
 
    height: 3px; 
 
    width: 100%; 
 
    z-index: 1; 
 
}

<progress id='video-progress' min='0' max='100' value=''></progress>

Answer 2

Das perfekt funktioniert für mich!

function smoothProgress(e) { 
    var id = $("#"+e.data.id), 
     dur = 5000, 
     seq = 100, 
     max = parseInt(id.attr("max"), 10), 
     chunk = max/dur * seq, 
     loop = setInterval(function() { 
     if(id.val() < max) 
      id.val(id.val() + chunk); 
     else 
      clearInterval(loop); 
     } 
    }, seq); 
} 
$(document).ready(function() { 
    $("#launch").on("click", {id: $("progress").attr("id")}, smoothProgress); 
}); 

Natürlich können Sie die dur Parameter einstellen oder abrufen es auf Ihren Videos Dauer dynamisch basiert, sowie die seq Parameter (je niedriger, desto glatte).

Hier ist ein fiddle für Demo.