Progressbar Vue Component

    Progressbar Vue component represents Progressbar element.

    Progressbar Components

    There are following components included:

    • f7-progressbar

    Progressbar Properties

    Prop Type Description
    <f7-progressbar> properties
    progress number Determinate progress (from 0 to 100)
    infinite boolean Whether progressbar is infinite or not (determinate)

    Progressbar Methods

    <f7-progressbar> methods
    .set(progress, duration) Set progressbar progress

    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>