預載器

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 - 字串。預載器顏色，預設顏色之一

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>

改善此文件

在此頁面

預載器版面配置
預載器顏色
預載器覆蓋 / 預載器 API
CSS 變數
範例