预加载器

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)- 显示预加载器覆盖层

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

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

  • el - HTMLElement或字符串(使用CSS选择器)。预加载器覆盖层将被添加的元素
  • color - 字符串. 预加载器颜色，一个是默认颜色之一

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

  • el - HTMLElement或字符串(使用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>
改进此文档
在本页上