スポンサースポンサーになる

プリローダー

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 または 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>
このドキュメントを改善する
このページの内容