プログレスバー

プリローダーに加えて、Framework7 は、アクティビティを示すために、洗練されたアニメーション化された決定的なプログレスバーと無限/不確定なプログレスバーも備えています。

決定的なプログレスバー

プログレスバーが決定的な場合、完了率が検出可能な場合に操作にどれくらいの時間がかかるかを示します。

決定的なプログレスバーのレイアウトを見てみましょう

<div class="progressbar" data-progress="20">
  <span></span>
</div>

ここで、data-progress="20" - 現在の進捗状況 (パーセント)。このデータ属性はページの読み込み時にのみ進捗状況を設定することに注意してください。後で変更する必要がある場合は、API を介して行う必要があります。

無限プログレスバー

プログレスバーが無限/不確定の場合、完了までにどれくらいの時間がかかるかを示す必要がない場合に、何かが完了するまでユーザーに待機するように要求します。

無限プログレスバーのレイアウトを見てみましょう

<div class="progressbar-infinite"></div>

プログレスバーの色

プログレスバーはすべてのデフォルトの色をサポートしています。そのため、色を変更するには、プログレスバー要素にcolor-[color]クラスを追加するだけです。

<!-- Red progressbar -->
<div class="progressbar color-red" data-progress="20">
  <span></span>
</div>

<!-- Green progressbar -->
<div class="progressbar color-green" data-progress="50">
  <span></span>
</div>

<!-- Yellow infinite progressbar -->
<div class="progressbar-infinite color-yellow"></div>

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

プログレスバー API

プログレスバーには、プログレスバーの進捗状況を制御し、表示/非表示にすることができる API が付属しています。適切なアプリのプロパティとメソッドを見てみましょう

app.progressbar.set(el, progress, duration) - 決定的なプログレスバーの進捗状況を設定します。

el - 文字列またはHTMLElement。プログレスバー要素またはプログレスバー要素を含む要素。文字列の場合、そのような要素の CSS セレクターです。
progress - 数値。進捗状況 (パーセント) (0 から 100)
duration - 数値。進捗状況変更アニメーションの遷移時間 (ミリ秒単位)
このメソッドは、プログレスバー HTMLElement を返します

app.progressbar.set(progress, duration) - アプリのルート要素の下にある決定的なプログレスバーの進捗状況を設定します。

progress - 数値。進捗状況 (パーセント) (0 から 100)
duration - 数値。進捗状況変更アニメーションの遷移時間 (ミリ秒単位)
このメソッドは、プログレスバー HTMLElement を返します

app.progressbar.show(el, progress, color) - プログレスバーを作成して表示するか、単に表示します (既に表示されている場合)。

el - 文字列またはHTMLElement。プログレスバー要素コンテナまたはプログレスバー要素を含む要素。文字列の場合、そのような要素の CSS セレクターです。 *オプション*
progress - 数値。進捗状況 (パーセント) (0 から 100)。 *オプション*
color - 文字列。プログレスバーの色。たとえば、使用可能なカラースキームから「白」、「赤」など。 *オプション*
このメソッドは、プログレスバー HTMLElement を返します

ここでのすべての引数はオプションです

el引数を省略すると、アプリルートの下にあるプログレスバー要素を探します (または作成します)
progressを省略すると、無限プログレスバーが表示/作成されます
すべての引数を省略すると、アプリルートの下にデフォルトの色で無限プログレスバーが表示/作成されます

app.progressbar.hide(el) - プログレスバーを非表示にします。

el - 文字列またはHTMLElement。プログレスバー要素コンテナまたはプログレスバー要素を含む要素。文字列の場合、そのような要素の CSS セレクターです.指定されていない場合、アプリのルート要素の下にあるそのような要素を探します.

CSS 変数

以下は、関連する CSS 変数 (CSS カスタムプロパティ) のリストです。

コメント化された変数はデフォルトでは指定されておらず、この場合の値はフォールバックされる値であることに注意してください。

:root {
  /*
  --f7-progressbar-progress-color: var(--f7-theme-color);
  */
}
.ios {
  --f7-progressbar-height: 4px;
  --f7-progressbar-border-radius: 4px;
  --f7-progressbar-bg-color: rgba(0, 0, 0, 0.3);
}
.ios .dark,
.ios.dark {
  --f7-progressbar-bg-color: rgba(255, 255, 255, 0.3);
}
.md {
  --f7-progressbar-height: 4px;
  --f7-progressbar-border-radius: 0px;
}
.md,
.md .dark,
.md [class*='color-'] {
  --f7-progressbar-bg-color: rgba(var(--f7-theme-color-rgb), 0.5);
}

例

progressbar.html

<template>
  <div class="page">
    <div class="navbar">
      <div class="navbar-bg"></div>
      <div class="navbar-inner sliding">
        <div class="title">Progress Bar</div>
      </div>
    </div>
    <div class="page-content">
      <div class="block">
        <p>In addition to <a href="/preloader/">Preloader</a>, Framework7 also comes with fancy animated determinate and
          infinite/indeterminate progress bars to indicate some activity.</p>
      </div>
      <div class="block-title">Determinate Progress Bar</div>
      <div class="block block-strong-ios block-outline-ios">
        <p>When progress bar is determinate it indicates how long an operation will take when the percentage complete is
          detectable.</p>
        <p>Inline determinate progress bar:</p>
        <div>
          <p><span data-progress="10" class="progressbar" id="demo-inline-progressbar"></span></p>
          <p class="segmented segmented-raised">
            <a class="button" @click=${()=> setInlineProgress(10)}>10%</a>
            <a class="button" @click=${()=> setInlineProgress(30)}>30%</a>
            <a class="button" @click=${()=> setInlineProgress(50)}>50%</a>
            <a class="button" @click=${()=> setInlineProgress(100)}>100%</a>
          </p>
        </div>
        <div>
          <p>Inline determinate load & hide:</p>
          <p id="demo-determinate-container"></p>
          <p>
            <a href="" class="button button-fill" @click=${()=> showDeterminate(true)}>Start Loading</a>
          </p>
        </div>
        <div>
          <p>Overlay with determinate progress bar on top of the app:</p>
          <p>
            <a href="" class="button button-fill" @click=${()=> showDeterminate(false)}>Start Loading</a>
          </p>
        </div>
      </div>
      <div class="block-title">Infinite Progress Bar</div>
      <div class="block block-strong-ios block-outline-ios">
        <p>When progress bar is infinite/indeterminate it requests that the user wait while something finishes when it’s
          not necessary to indicate how long it will take.</p>
        <p>Inline infinite progress bar</p>
        <p>
          <span class="progressbar-infinite"></span>
        </p>
        <p>Multi-color infinite progress bar</p>
        <p>
          <span class="progressbar-infinite color-multi"></span>
        </p>
        <div>
          <p>Overlay with infinite progress bar on top of the app</p>
          <p id="demo-infinite-container"></p>
          <p>
            <a href="" class="button button-fill" @click=${()=> showInfinite(false)}>Start Loading</a>
          </p>
        </div>
        <div>
          <p>Overlay with infinite multi-color progress bar on top of the app</p>
          <p>
            <a href="" class="button button-fill" @click=${()=> showInfinite(true)}>Start Loading</a>
          </p>
        </div>
      </div>
      <div class="block-title">Colors</div>
      <div class="list list-strong-ios list-outline-ios list-dividers-ios simple-list">
        <ul>
          <li>
            <div class="progressbar color-blue" data-progress="10"></div>
          </li>
          <li>
            <div class="progressbar color-red" data-progress="20"></div>
          </li>
          <li>
            <div class="progressbar color-pink" data-progress="30"></div>
          </li>
          <li>
            <div class="progressbar color-green" data-progress="80"></div>
          </li>
          <li>
            <div class="progressbar color-yellow" data-progress="90"></div>
          </li>
          <li>
            <div class="progressbar color-orange" data-progress="100"></div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
  export default (props, { $f7, $el, $onMounted, $onBeforeUnmount }) => {
    let determinateLoading = false;
    let infiniteLoading = false;
    const setInlineProgress = (value) => {
      $f7.progressbar.set('#demo-inline-progressbar', value);
    }
    const showDeterminate = (inline) => {
      if (determinateLoading) return;
      determinateLoading = true;
      var progressBarEl;
      if (inline) {
        progressBarEl = $f7.progressbar.show('#demo-determinate-container', 0);
      } else {
        progressBarEl = $f7.progressbar.show(0);
      }
      var progress = 0;
      function simulateLoading() {
        setTimeout(function () {
          var progressBefore = progress;
          progress += Math.random() * 20;
          $f7.progressbar.set(progressBarEl, progress);
          if (progressBefore < 100) {
            simulateLoading(); //keep "loading"
          }
          else {
            determinateLoading = false;
            $f7.progressbar.hide(progressBarEl); //hide
          }
        }, Math.random() * 200 + 200);
      }
      simulateLoading();
    }
    const showInfinite = (multiColor) => {
      if (infiniteLoading) return;
      infiniteLoading = true;
      if (multiColor) {
        $f7.progressbar.show('multi');
      } else {
        $f7.progressbar.show();
      }
      setTimeout(function () {
        infiniteLoading = false;
        $f7.progressbar.hide();
      }, 3000);
    }

    return $render;
  };
</script>

このドキュメントを改善する

このページについて

決定的なプログレスバー
無限プログレスバー
プログレスバーの色
プログレスバー API
CSS 変数
例