Progress Bar 100% auf Last

Question

Ich versuche, Fortschrittsbalken für meine Ein-Seiten-Website und alles funktioniert und wie ich mit Ausnahme machen will, wenn Seite ist bar Last läuft auf 100% nicht auf 0% bis ich blättern beginnen. Dies ist mein Code:

HTML

<div class="progressContainer"> 
    <div id="progress" class="progress"></div> 
</div> 

CSS

.progressContainer{ 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 10px; 
    background-color: rgba(0,0,0,0.65); 
} 

.progress{ 
    height: 10px; 
    background: #D66A00; 
    border-radius: 0; 
} 

JavaScript

function updateProgress(num1, num2){ 
    var percent = Math.ceil(num1/num2 * 100) + '%'; 
    document.getElementById('progress').style.width = percent; 
} 

window.addEventListener('scroll', function(){ 
    var top = window.scrollY; 
    var height = document.body.getBoundingClientRect().height - window.innerHeight; 
    updateProgress(top, height); 
}); 

DEMO

https://codepen.io/Klak031/pen/xdXYgb/

Answer 1

Nur ein kleiner Fehler in CSS kann das Update tun.width:0% zu Ihrem progress class hinzufügen und Sie sind gut zu gehen.

.progress{ 
    height: 10px; 
    background: #D66A00; 
    border-radius: 0; 
    width:0%; 
} 

Hier ist die Aktualisiert codepen: https://codepen.io/anon/pen/mmBXXB

Answer 2

Sie müssen verschiedene Funktionen bereit verwenden.

$(document).ready(function(){ 
    updateProgress(0, 100); 
}); 

Edited Codepen

Update: eigentlich gibt es keine Notwendigkeit, etwas auf dem Dokument bereit zu tun, mein schlecht. Einstellung

.progress { width: 0;} 

wird den Trick tun.

Answer 3

Wenn Sie das übergeordnete Element nicht auf die Breite des Fortschritts-Klasse festgelegt, wird es standardmäßig auf Auto eingestellt werden und wird ausfüllen, in diesem Fall die progressContainer-Klasse, die eine Breite von 100% hat.

.progress{ 
    height: 10px; 
    background: #D66A00; 
    border-radius: 0; 
    widht: 0; 
} 

Ich hoffe, es hat geholfen, die Lösung für Ihr Problem zu verstehen.