加载器

Framework7 拥有一个漂亮的加载器指示符。加载器使用 SVG 制作并通过 CSS 进行动画处理，因此可以轻松调整大小。

加载器布局

布局非常简单

<div class="preloader"></div>

如果在对预先加载器初始化之前将其放在页面上，此布局有效。如果你需要稍后在页面中添加预先加载器或在自定义布局中使用预先加载器，则使用全屏预先加载器布局。它对于每个主题来说都不同

iOS 主题预先加载器布局

<div class="preloader">
  <span class="preloader-inner">
    <span class="preloader-inner-line"></span>
    <span class="preloader-inner-line"></span>
    <span class="preloader-inner-line"></span>
    <span class="preloader-inner-line"></span>
    <span class="preloader-inner-line"></span>
    <span class="preloader-inner-line"></span>
    <span class="preloader-inner-line"></span>
    <span class="preloader-inner-line"></span>
  </span>
</div>

MD 主题预先加载器布局

<div class="preloader">
  <span class="preloader-inner">
    <svg viewBox="0 0 36 36">
      <circle cx="18" cy="18" r="16"></circle>
    </svg>
  </span>
</div>

预先加载器颜色

预先加载器支持所有默认颜色。因此，要更改其颜色，只需向预先加载器元素添加 color-[color] 类。

MD 主题还支持特殊的 color-multi 颜色以使预先加载器变成多色。

<!-- Red preloader -->
<div class="preloader color-red"></div>

<!-- Green preloader -->
<div class="preloader color-green"></div>

<!-- Multicolor preloader -->
<div class="preloader color-multi"></div>

预先加载器覆盖/预先加载器 API

还可以调用特殊的“预先加载器覆盖”，在需要阻止用户操作直到内容加载完毕时，此功能非常有用。此类预先加载器将出现在应用程序的前面，并阻止其后面的任何用户操作。

我们来看看有助于使用预先加载器覆盖的相关应用程序方法

app.preloader.show(color)-显示预先加载器覆盖

color - string。预先加载器的颜色，即默认颜色之一

app.preloader.hide()-隐藏预先加载器覆盖

app.preloader.showIn(el, color)-在指定的元素中显示预先加载器覆盖

el - HTMLElement 或 string（使用 CSS 选择器）。将添加预先加载器覆盖的元素
color - string。预先加载器的颜色，即默认颜色之一

app.preloader.hideIn(el)-在指定的元素中隐藏预先加载器覆盖

el - HTMLElement 或 string（使用 CSS 选择器）。应该从其移除预先加载器覆盖的元素

例如

var app = new Framework7();

// Show preloader before Ajax request
app.preloader.show();

// Perform Ajax request
fetch('someurl.html').then(() => {
  // Hide preloader when Ajax request completed
  app.preloader.hide();
});

打开预先加载器覆盖还将向元素添加 with-modal-preloader 类。

CSS 变量

以下是相关 CSS 变量（自定义 CSS 属性）的列表。

:root {
  --f7-preloader-modal-padding: 8px;
  --f7-preloader-modal-bg-color: rgba(0, 0, 0, 0.8);
}
.ios {
  --f7-preloader-color: #6c6c6c;
  --f7-preloader-size: 20px;
  --f7-preloader-modal-preloader-size: 34px;
  --f7-preloader-modal-border-radius: 5px;
}
.md {
  --f7-preloader-color: #757575;
  --f7-preloader-size: 32px;
  --f7-preloader-modal-preloader-size: 32px;
  --f7-preloader-modal-border-radius: 4px;
}

示例

preloader.html

<template>
  <div class="page">
    <div class="navbar">
      <div class="navbar-bg"></div>
      <div class="navbar-inner sliding">
        <div class="title">Preloader</div>
      </div>
    </div>
    <div class="page-content">
      <div class="block">
        <p>How about an activity indicator? Framework7 has a nice one. The F7 Preloader is made with SVG and animated
          with CSS so it can be easily resized.</p>
      </div>
      <div class="block-title">Default</div>
      <div class="block block-strong-ios block-outline-ios demo-preloaders align-items-stretch text-align-center">
        <div class="grid grid-cols-4 grid-gap">
          <div>
            <div class="preloader"></div>
          </div>
          <div class="demo-black-col">
            <div class="preloader color-white"></div>
          </div>
          <div>
            <div class="preloader preloader-large"></div>
          </div>
          <div class="demo-black-col">
            <div class="preloader preloader-large color-white"></div>
          </div>
        </div>
      </div>
      <div class="block-title">Color Preloaders</div>
      <div class="block block-strong-ios block-outline-ios text-align-center">
        <div class="grid grid-cols-4 grid-gap">
          <div>
            <div class="preloader text-color-red"></div>
          </div>
          <div>
            <div class="preloader text-color-green"></div>
          </div>
          <div>
            <div class="preloader text-color-orange"></div>
          </div>
          <div>
            <div class="preloader text-color-blue"></div>
          </div>
        </div>
      </div>
      <div class="block-title">Multi-color</div>
      <div class="block block-strong-ios block-outline-ios text-align-center">
        <div class="preloader color-multi"></div>
      </div>
      <div class="block-title">Preloader Modals</div>
      <div class="block block-strong-ios block-outline-ios">
        <p>With <b>app.preloader.show()</b> you can show small overlay with preloader indicator.</p>
        <p>
          <a class="button button-fill" @click=${openIndicator}>Open Small Indicator</a>
        </p>
        <p>With <b>app.dialog.preloader()</b> you can show dialog modal with preloader indicator.</p>
        <p>
          <a class="button button-fill" @click=${openDialog}>Open Dialog Preloader</a>
        </p>
        <p>With <b>app.dialog.preloader('My text...')</b> you can show dialog preloader modal with custom title.</p>
        <p>
          <a class="button button-fill" @click=${openCustomDialog}>Open Dialog Preloader</a>
        </p>
      </div>
    </div>
  </div>
</template>
<style>
  .preloader-large {
    width: 42px;
    height: 42px;
  }

  .demo-preloaders .grid>div {
    padding: 5px;
    line-height: 42px;
  }

  .demo-black-col {
    background: #000;
  }
</style>
<script>
  export default (props, { $f7 }) => {
    const openIndicator = () => {
      $f7.preloader.show();
      setTimeout(function () {
        $f7.preloader.hide();
      }, 2000);
    }
    const openDialog = () => {
      $f7.dialog.preloader();
      setTimeout(function () {
        $f7.dialog.close();
      }, 2000);
    }
    const openCustomDialog = () => {
      $f7.dialog.preloader('My text...');
      setTimeout(function () {
        $f7.dialog.close();
      }, 2000);
    }

    return $render;
  };
</script>

改善此文档

在本页

加载器布局
预先加载器颜色
预先加载器覆盖/预先加载器 API
CSS 变量
示例