プリローダー

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>

Auroraテーマのプリローダーレイアウト

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

プレローダの色

プリローダーは、デフォルトカラーを全てサポートしています。そのため、preloader要素にcolor-[color]クラスを追加するだけで、色を変更することができます。

また、MDテーマでは、プレローダを多色化するための特別なカラー color-multi もサポートしています。

<!-- 赤のプリローダ -->
<div class="preloader color-red"></div>

<!-- 緑のプリローダ -->
<div class="preloader color-green"></div>

<!-- 多色プレローダ -->
<div class="preloader color-multi"></div>

プリローダオーバーレイ/プリローダAPI

特別なプリローダーオーバーレイを呼び出すことも可能です。これは、何かが読み込まれるまでユーザーのアクションをブロックする必要がある場合に便利です。この種のプリローダーは、アプリの前に表示され、その後ろでユーザーのアクションをブロックします。

プリローダオーバーレイを扱うアプリの関連メソッドを見てみましょう。

app.preloader.show(color)- プリローダオーバーレイの表示

color - string。プレローダの色。デフォルトの色のうちの1つです。

app.preloader.hide()- プリローダのオーバーレイを隠す

app.preloader.showIn(el, color)- 指定した要素にプリローダのオーバーレイを表示する

el - HTMLElementまたはstring(CSS Selector使用時)を指定します。プリローダオーバーレイが追加される要素
color - string. プレローダの色（デフォルトの色のうちの1つ）。

app.preloader.hideIn(el)- 指定した要素のプレローダオーバーレイを隠す

el - HTMLElementまたはstring(CSS Selectorを使用)を指定します。プリローダーのオーバーレイを削除する対象となる要素

例：

var app = new Framework7();

// Ajaxリクエストの前にプリローダを表示する
app.preloader.show();

// Ajaxリクエストの実行
app.request.get('someurl.html').then(() => {
  // Ajaxリクエストが完了したらプリローダを隠す
  app.preloader.hide();
});

プリローダオーバーレイを開くと、要素にwith-modal-preloaderクラスが追加されます。

CSS Variables

Below is the list of related CSS variables (CSS custom properties).

: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;
}
.aurora {
  --f7-preloader-color: #757575;
  --f7-preloader-size: 24px;
  --f7-preloader-modal-preloader-size: 24px;
  --f7-preloader-modal-border-radius: 4px;
}

Examples

<template>
  <div class="page">
    <div class="navbar">
      <div class="navbar-bg"></div>
      <div class="navbar-inner">
        <div class="title">Preloader</div>
      </div>
    </div>
    <div class="page-content">
      <div class="block-title">Default</div>
      <div class="block block-strong align-items-stretch text-align-center">
        <div class="row text-align-center">
          <div class="col-25">
            <div class="preloader"></div>
          </div>
          <div class="col-25" style="background: #222">
            <div class="preloader color-white"></div>
          </div>
          <div class="col-25">
            <div class="preloader" style="width: 44px; height: 44px"></div>
          </div>
          <div class="col-25" style="background: #222">
            <div class="preloader color-white" style="width: 44px; height: 44px"></div>
          </div>
        </div>
      </div>
      <div class="block-title">Color Preloaders</div>
      <div class="block block-strong">
        <div class="row">
          <div class="col-25">
            <div class="preloader color-red"></div>
          </div>
          <div class="col-25">
            <div class="preloader color-green"></div>
          </div>
          <div class="col-25">
            <div class="preloader color-orange"></div>
          </div>
          <div class="col-25">
            <div class="preloader color-blue"></div>
          </div>
        </div>
      </div>
      <div class="block-title">Multi-color</div>
      <div class="block block-strong text-align-center">
        <div class="preloader color-multi"></div>
      </div>
      <div class="block-title">Preloader Modals</div>
      <div class="block block-strong">
        <p>With <b>$f7.preloader.show()</b> you can show small overlay with preloader indicator.</p>
        <p>
          <a class="button button-fill open-preloader-indicator">Open Small Indicator</a>
        </p>
      </div>
    </div>
  </div>
</template>
<style>
  .col-25 {
    padding: 5px;
    text-align: center;
  }
</style>
<script>
  export default (props, { $, $f7, $on }) => {
    $on('pageInit', () => {
      $('.open-preloader-indicator').on('click', function () {
        $f7.preloader.show();
        setTimeout(function () {
          $f7.preloader.hide();
        }, 3000);
      });
    })
    return $render;
  }
</script>