Material CSS - Preloader nach Laden der Seite stoppen

Question

Ich spiele mit MaterialCSS herum und wollte die Preloader-Klasse verwenden, die sie bereitstellen, insbesondere die liner Determinate class. Die Benutzung ist ziemlich einfach, da ich dies oben auf meiner Seite hinzufügen:

<div class="progress"> 
     <div class="determinate" id="loader" onload="progbar();"></div> 
    </div> 

Ich habe versucht, Hacking zusammen einige Javascript (Ich habe keine Ahnung von jquery) die Breite mit diesem dynamisch zu aktualisieren:

function progbar() { 
    for (i = 1; i = 100; i++) { 
    document.getElementById("loader").style.width = i; 
    } 
} 

Aber das dosnt Arbeit (dh sieht aus wie width=0). Ich versuche nur, einen Fortschrittsbalken von 0 - 100 zu laden und ihn beim Laden der Seite verschwinden zu lassen. Ein Schubs in die richtige Richtung stark

Answer 1

geschätzt wird denke ich, was Sie suchen die folgenden

1. Eine einfache Basis-HTML-Seite, die schnell mit dem Lader Code
2. Asynchron laden Sie Ihre Anwendung macht
3. Wenn der Anwendungscode vollständig geladen wurde, ersetzen Sie den Loader durch Ihre gerenderte App.

Hier ist eine Simulation, um es klar

// simulate async loading of your app scripts... 
 
setTimeout(appReady, 2000); 
 

 

 
function appReady() { 
 
    let appContainer = document.getElementById("appContainer"); 
 
    while (appContainer.firstChild) { 
 
    appContainer.removeChild(appContainer.firstChild); 
 
    } 
 

 
    let app = document.createElement("div"); 
 
    app.textContent = "your app"; 
 
    appContainer.appendChild(app); 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/js/materialize.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.min.css" rel="stylesheet" /> 
 

 
<div id="appContainer"> 
 
    <div class="progress"> 
 
    <div class="indeterminate"></div> 
 
    </div> 
 
</div>

Answer 2

Aus der materialisieren docs etwas macht es sieht aus wie i sein müßte ich einen Prozentsatz/Pixel +/em. Im Moment ist es nur eine Nummer.

Außerdem sollten Sie Ihre for-Schleife wahrscheinlich sein:

function progbar() { 
    for (i = 0; i < 100; i++) { 
    document.getElementById("loader").style.width = i + 'px'; 
    } 
}