物化 CSS | 预加载器

介绍

物化 CSS 是一个开源的 CSS 框架，它专注于 Material Design。它提供了众多的组件，包括按钮、卡片、工具栏、表单、图标等等。

而预加载器则是指在网页内容正式展示之前，在页面中显示一些动画效果来提示用户内容正在加载。这不仅可以增加页面的视觉效果，还可以给用户更流畅的体验。

这篇文章将会介绍如何使用物化 CSS 中的预加载器来美化你的网页。

物化 CSS 中的预加载器

在物化 CSS 中，预加载器的样式都已经写好了，我们只需要在 HTML 中添加对应的 class 名即可。

以下是物化 CSS 中提供的预加载器：

圈圈预加载器

<div class="preloader-wrapper small active">
  <div class="spinner-layer spinner-blue-only">
    <div class="circle-clipper left">
      <div class="circle"></div>
    </div><div class="gap-patch">
      <div class="circle"></div>
    </div><div class="circle-clipper right">
      <div class="circle"></div>
    </div>
  </div>
</div>

滚轮预加载器

<div class="preloader-wrapper small active">
  <div class="spinner-layer spinner-blue">
    <div class="circle-clipper left">
      <div class="circle"></div>
    </div><div class="gap-patch">
      <div class="circle"></div>
    </div><div class="circle-clipper right">
      <div class="circle"></div>
    </div>
  </div>
</div>

蓝色预加载器

<div class="preloader-wrapper small active">
  <div class="spinner-layer spinner-blue">
    <div class="circle-clipper left">
      <div class="circle"></div>
    </div><div class="gap-patch">
      <div class="circle"></div>
    </div><div class="circle-clipper right">
      <div class="circle"></div>
    </div>
  </div>
</div>

大型预加载器

<div class="preloader-wrapper big active">
  <div class="spinner-layer spinner-blue">
    <div class="circle-clipper left">
      <div class="circle"></div>
    </div><div class="gap-patch">
      <div class="circle"></div>
    </div><div class="circle-clipper right">
      <div class="circle"></div>
    </div>
  </div>
</div>

显示预加载器

要使预加载器显示出来，我们需要添加相应的 class（active）。当我们需要隐藏预加载器时，只需要将这个 class 移除即可。

下面是一个例子：

<div id="preloader" class="center-align">
  <div class="preloader-wrapper big active">
    <div class="spinner-layer spinner-blue">
      <div class="circle-clipper left">
        <div class="circle"></div>
      </div><div class="gap-patch">
        <div class="circle"></div>
      </div><div class="circle-clipper right">
        <div class="circle"></div>
      </div>
    </div>
  </div>
</div>

<script>
  // 隐藏预加载器
  document.getElementById("preloader").classList.remove("active");
</script>

以上的例子，展示了一个大型预加载器。当页面加载完毕后，我们可以通过 JavaScript 移除 "active" 这个 class 来隐藏预加载器。

结论

在文章中，我们介绍了物化 CSS 中的预加载器，并演示了如何将这些预加载器添加到我们的网页中。

预加载器虽然看似不起眼，但是它却可以让我们的网页内容更加流畅、美观。希望读者可以通过本文的介绍，了解如何使用预加载器来提高网页的体验。