材质CSS-页面加载后停止预加载器

Question

我正在与MaterialCSS玩耍，并想使用它们提供的preloader类，尤其是Liner Determinate类 。 使用它非常简单，因为我可以将其添加到页面顶部：

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

我尝试一起破解一些JavaScript（我对jquery不了解）以使用此动态更新宽度：

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

但是，这项工作（即看起来像width=0 ）。 我只是想让进度条从0-100加载，并使其在页面加载时消失。 朝正确方向轻推将不胜感激

Answer 1

我认为您正在寻找以下内容

1. 一个简单的基本html页面，可使用加载程序快速呈现
2. 异步加载您的应用程序代码
3. 应用程序代码完成加载后，将加载程序替换为呈现的应用程序。

这是一个模拟，使其更加清晰

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

从物化文档看来， i将需要为i +百分比/像素/ em。 目前，这只是一个数字。

另外，您的for循环可能应该是：

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