Progressbar Vue Component

• Progressbar Components
• Progressbar Properties
• Progressbar Methods
• Examples

Progressbar Vue component represents Progressbar element.

Progressbar Components

There are following components included:

• **f7-progressbar**

Progressbar Properties

Progressbar Methods

Examples

<template>
  <f7-page>
    <f7-navbar title="Progress Bar"></f7-navbar>
    <f7-block-title>Determinate Progress Bar</f7-block-title>
    <f7-block strong>
      <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><f7-progressbar :progress="10" id="demo-inline-progressbar"></f7-progressbar></p>
        <f7-segmented raised>
          <f7-button @click="setInlineProgress(10)">10%</f7-button>
          <f7-button @click="setInlineProgress(30)">30%</f7-button>
          <f7-button @click="setInlineProgress(50)">50%</f7-button>
          <f7-button @click="setInlineProgress(100)">100%</f7-button>
        </f7-segmented>
      </div>
      <div>
        <p>Inline determinate load & hide:</p>
        <p id="demo-determinate-container"></p>
        <p>
          <f7-button raised @click="showDeterminate(true)">Start Loading</f7-button>
        </p>
      </div>
      <div>
        <p>Overlay with determinate progress bar on top of the app:</p>
        <p>
          <f7-button raised @click="showDeterminate(false)">Start Loading</f7-button>
        </p>
      </div>
    </f7-block>
    <f7-block-title>Infinite Progress Bar</f7-block-title>
    <f7-block strong>
      <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>
        <f7-progressbar infinite></f7-progressbar>
      </p>
      <p>Multi-color infinite progress bar</p>
      <p>
        <f7-progressbar infinite color="multi"></f7-progressbar>
      </p>
      <div>
        <p>Overlay with infinite progress bar on top of the app</p>
        <p id="demo-infinite-container"></p>
        <p>
          <f7-button raised @click="showInfinite(false)">Start Loading</f7-button>
        </p>
      </div>
      <div>
        <p>Overlay with infinite multi-color progress bar on top of the app</p>
        <p>
          <f7-button raised @click="showInfinite(true)">Start Loading</f7-button>
        </p>
      </div>
    </f7-block>
    <f7-block-title>Colors</f7-block-title>
    <div class="list simple-list">
      <ul>
        <li>
          <f7-progressbar color="blue" :progress="10"></f7-progressbar>
        </li>
        <li>
          <f7-progressbar color="red" :progress="20"></f7-progressbar>
        </li>
        <li>
          <f7-progressbar color="pink" :progress="30"></f7-progressbar>
        </li>
        <li>
          <f7-progressbar color="green" :progress="80"></f7-progressbar>
        </li>
        <li>
          <f7-progressbar color="yellow" :progress="90"></f7-progressbar>
        </li>
        <li>
          <f7-progressbar color="orange" :progress="100"></f7-progressbar>
        </li>
      </ul>
    </div>
  </f7-page>
</template>
<script>
  export default {
    methods: {
      setInlineProgress(value) {
        const self = this;
        const app = self.$f7;
        app.progressbar.set('#demo-inline-progressbar', value);
      },
      showDeterminate(inline) {
        const self = this;
        const app = self.$f7;
        if (self.determinateLoading) return;
        self.determinateLoading = true;
        let progressBarEl;
        if (inline) {
          progressBarEl = app.progressbar.show('#demo-determinate-container', 0);
        } else {
          progressBarEl = app.progressbar.show(0, app.theme === 'md' ? 'yellow' : 'blue');
        }
        let progress = 0;
        function simulateLoading() {
          setTimeout(() => {
            const progressBefore = progress;
            progress += Math.random() * 20;
            app.progressbar.set(progressBarEl, progress);
            if (progressBefore < 100) {
              simulateLoading(); // keep "loading"
            } else {
              self.determinateLoading = false;
              app.progressbar.hide(progressBarEl); // hide
            }
          }, Math.random() * 200 + 200);
        }
        simulateLoading();
      },
      showInfinite(multiColor) {
        const self = this;
        const app = self.$f7;
        if (self.infiniteLoading) return;
        self.infiniteLoading = true;
        if (multiColor) {
          app.progressbar.show('multi');
        } else {
          app.progressbar.show(app.theme === 'md' ? 'yellow' : 'blue');
        }
        setTimeout(() => {
          self.infiniteLoading = false;
          app.progressbar.hide();
        }, 3000);
      },
    },
  };
</script>