Progressbar

In addition to Preloader Framework7 also comes with fancy animated determinate and infinite/indeterminate progressbars to indicate activity.

Determinate Progressbar

When progressbar is determinate it indicates how long an operation will take when the percentage complete is detectable.

Let's look at layout of determinate progressbar:

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

Where data-progress="20" - current progress (in percents). Note that this data attribute sets progress only on page load. If you need to change it later it should be done via API.

Infinite Progressbar

When progressbar is infinite/indeterminate it requests that the user wait while something finishes when it’s not necessary to indicate how long it will take.

Let's look at layout of infinite progressbar:

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

Progressbar Colors

Progressbar supports all default colors. So to change its color just add color-[color] class to progressbar element.

<!-- 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>

Progressbar API

Progressbar comes with API that allows you to control Progressbar's progress, show and hide it. Let's look on appropriate App's properties and methods:

app.progressbar.set(el, progress, duration) - set progress for Determinate Progressbar.

  • el - string or HTMLElement. Progressbar element or element containing progressbar element. If string - CSS selector of such element.
  • progress - number. Progress in percents (from 0 to 100)
  • duration - number. Transition duration of progress change animation (in ms)
  • This method returns Progressbar HTMLElement

app.progressbar.set(progress, duration) - set progress for Determinate Progressbar which is under the app root element.

  • progress - number. Progress in percents (from 0 to 100)
  • duration - number. Transition duration of progress change animation (in ms)
  • This method returns Progressbar HTMLElement

app.progressbar.show(el, progress, color) - create and show or just show (if already presented) progressbar.

  • el - string or HTMLElement. Progressbar element container or element containing progressbar element. If string - CSS selector of such element. Optional
  • progress - number. Progress in percents (from 0 to 100). Optional
  • color - string. Color of progressbar, for example "white", "red", etc. from available color themes. Optional
  • This method returns Progressbar HTMLElement

All arguments here are optional:

  • If you omit el argument, it will look for (or create) progressbar element under app root
  • If you omit progress, it will show/create infinite progressbar
  • If you omit all arguments, then it will show/create infinite progressbar under the app root with default color

app.progressbar.hide(el) - hide Progressbar.

  • el - string or HTMLElement. Progressbar element container or element containing progressbar element. If string - CSS selector of such element. If not specified then it will look for such element under the app root element.

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 .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);
}

Examples

progressbar.html
<template>
  <div class="page">
    <div class="navbar">
      <div class="navbar-bg"></div>
      <div class="navbar-inner sliding">
        <div class="left">
          <a class="link back">
            <i class="icon icon-back"></i>
            <span class="if-not-md">返回</span>
          </a>
        </div>
        <div class="title">进度条</div>
      </div>
    </div>
    <div class="page-content">
      <div class="block">
        <p>除了<a href="/preloader/">预加载器</a>之外，Framework7还提供了漂亮的动画确定和无限/不确定进度条，用于指示某些活动。</p>
      </div>
      <div class="block-title">确定进度的进度条</div>
      <div class="block block-strong-ios block-outline-ios">
        <p>除了<a href="/preloader/">预加载器</a>之外，Framework7还提供了漂亮的动画确定和无限/不确定进度条，用于指示某些活动。.</p>
        <p>行内加载进度条:</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>行内确定加载和隐藏:</p>
          <p id="demo-determinate-container"></p>
          <p>
            <a href="" class="button button-fill" @click=${()=> showDeterminate(true)}>开始加载</a>
          </p>
        </div>
        <div>
          <p>在应用程序的顶部叠加一个确定进度条。:</p>
          <p>
            <a href="" class="button button-fill" @click=${()=> showDeterminate(false)}>开始加载</a>
          </p>
        </div>
      </div>
      <div class="block-title">无限加载进度条</div>
      <div class="block block-strong-ios block-outline-ios">
        <p>当进度条是无限/不确定的时候，它要求用户等待某个任务完成，而不需要指示需要多长时间。</p>
        <p>行内无限滚动进度条</p>
        <p>
          <span class="progressbar-infinite"></span>
        </p>
        <p>多颜色进度条</p>
        <p>
          <span class="progressbar-infinite color-multi"></span>
        </p>
        <div>
          <p>在应用程序的顶部叠加一个无限进度条。</p>
          <p id="demo-infinite-container"></p>
          <p>
            <a href="" class="button button-fill" @click=${()=> showInfinite(false)}>开始加载</a>
          </p>
        </div>
        <div>
          <p>在应用程序的顶部叠加一个无限多彩进度条。</p>
          <p>
            <a href="" class="button button-fill" @click=${()=> showInfinite(true)}>开始加载</a>
          </p>
        </div>
      </div>
      <div class="block-title">颜色</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>
Improve this Doc
On this page