Material CSS - Stop preloader after page load

Question

I am playing around with MaterialCSS and wanted to use the preloader class they provide, particularly the liner Determinate class . Using it is fairly simple as I can add this to the top of my page:

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

I tried hacking together some javascript (I have no idea about jquery) to dynamically update the width using this:

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

But this dosnt work (ie looks like width=0 ). Im just trying to get a progress bar to load from 0 - 100 and making it dissapear on page load. A nudge in the right direction will be greatly appreciated

Answer 1

I think what you're looking for is the following

1. A simple base html page that renders fast with the loader
2. Asynchronously load your application code
3. When your application code has completed loading, replace the loader with your rendered app.

Here's a simulation to make it a bit more clear

 // 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

From the materialize docs it looks like i would need to be i + a percentage/pixels/em. At the moment it's just a number.

Also, your for loop should probably be:

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