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>