プログレスバー

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

確定プログレスバー

プログレスバーが確定型の場合、完了した割合が検出可能な場合に、操作にかかる時間を示します。

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

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

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

無限プログレスバー

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

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

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

プログレスバーの色

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

<!-- 赤のプログレスバー -->
<div class="progressbar color-red" data-progress="20">
  <span></span>
</div>

<!-- 緑のプログレスバー -->
<div class="progressbar color-green" data-progress="50">
  <span></span>
</div>

<!-- 黄色の無限プログレスバー -->
<div class="progressbar-infinite color-yellow"></div>

<!-- 多色刷りの無限プログレスバー -->
<div class="progressbar-infinite color-multi"></div>

Progressbar の API

プログレスバーには、プログレスバーの進行状況を制御したり、表示や非表示にしたりできるAPIが用意されています。適切なアプリのプロパティとメソッドを見てみましょう。

app.progressbar.set(el, progress, duration) - 決定型プログレスバーのプログレスを設定します。

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

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

progress - number. 進捗状況をパーセンテージで表します（0〜100
duration - number. プログレス変更アニメーションの遷移時間（単位：ミリ秒
このメソッドは、Progressbar HTMLElement

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

el - stringまたはHTMLElementを指定します。プログレスバー要素のコンテナまたはプログレスバー要素を含む要素。文字列の場合 - そのような要素の CSS セレクタです。Optional
progress - number. 進捗状況をパーセンテージで表示します（0から100まで）。Optional
color - string：プログレスバーの色。プログレスバーの色。color themesから "白"、"赤 "などを選択します。Optional
このメソッドは Progressbar HTMLElement を返します。

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

引数 el を省略すると、アプリのルート下にプログレスバー要素を探します（または作成します）。
progress`を省略した場合は、無限のプログレスバーを表示/作成します。
すべての引数を省略した場合は、アプリルートの下に無限のプログレスバーをデフォルトの色で表示/作成します。

app.progressbar.hide(el) - プログレスバーを隠す

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

CSS Variables

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

Note that commented variables are not specified by default and their values is what they fallback to in this case.

: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 .theme-dark,
.ios.theme-dark {
  --f7-progressbar-bg-color: rgba(255, 255, 255, 0.3);
}
.md {
  /*
  --f7-progressbar-bg-color: rgba(var(--f7-theme-color-rgb), 0.5);
  */
  --f7-progressbar-height: 4px;
  --f7-progressbar-border-radius: 0px;
}
.aurora {
  --f7-progressbar-height: 6px;
  --f7-progressbar-border-radius: 3px;
  --f7-progressbar-bg-color: #dbdbdb;
}
.aurora .theme-dark,
.aurora.theme-dark {
  --f7-progressbar-bg-color: #444;
}

Examples

<template>
  <div class="page">
    <div class="navbar">
      <div class="navbar-bg"></div>
      <div class="navbar-inner">
        <div class="title">Progressbar</div>
      </div>
    </div>
    <div class="page-content">
      <div class="block-title">Determinate Progress Bar</div>
      <div class="block block-strong">
        <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 href="#" @click=${setInlineProgress(10)} class="button set-inline-progress">10%</a>
            <a href="#" @click=${setInlineProgress(30)} class="button set-inline-progress">30%</a>
            <a href="#" @click=${setInlineProgress(50)} class="button set-inline-progress">50%</a>
            <a href="#" @click=${setInlineProgress(100)} class="button set-inline-progress">100%</a>
          </p>
        </div>
        <div>
          <p>Inline determinate load & hide:</p>
          <p id="demo-determinate-container"></p>
          <p>
            <a href="#" class="button button-raised" @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-raised" @click=${()=> showDeterminate()}>Start Loading</a>
          </p>
        </div>
      </div>
      <div class="block-title">Infinite Progress Bar</div>
      <div class="block block-strong">
        <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-raised" @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-raised" @click=${()=> showInfinite(true)}>Start Loading</a>
          </p>
        </div>
      </div>
      <div class="block-title">Colors</div>
      <div class="list 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, $on }) => {
    let determinateLoading = false;
    let infiniteLoading = false;

    // Set progress on inline progressbar
    const setInlineProgress = (value) => {
      $f7.progressbar.set('#demo-inline-progressbar', value);
    }

    // Function show determinate progressbar and emulate loading
    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();
    }

    // show inline infinite progressbar
    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>