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 preloader 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)
- speed - 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)
- speed - 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
elargument, 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-bg-color: #b6b6b6;
--f7-progressbar-height: 2px;
--f7-progressbar-border-radius: 2px;
}
.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-bg-color: #dbdbdb;
--f7-progressbar-height: 6px;
--f7-progressbar-border-radius: 3px;
}
.aurora .theme-dark,
.aurora.theme-dark {
--f7-progressbar-bg-color: #444;
}
Examples
<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="#" data-progress="10" class="button set-inline-progress">10%</a>
<a href="#" data-progress="30" class="button set-inline-progress">30%</a>
<a href="#" data-progress="50" class="button set-inline-progress">50%</a>
<a href="#" data-progress="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 show-determinate">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 show-determinate-root">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 show-infinite">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 show-infinite-root">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>var app = new Framework7();
var $$ = Dom7;
// Set progress on inline progressbar
$$('.set-inline-progress').on('click', function (e) {
var progress = $$(this).attr('data-progress');
app.progressbar.set('#demo-inline-progressbar', progress);
});
// Function show determinate progressbar and emulate loading
determinateLoading = false;
function showDeterminate(inline) {
determinateLoading = true;
var progressBarEl;
if (inline) {
// inline progressbar
progressBarEl = app.progressbar.show('#demo-determinate-container', 0);
} else {
// root progressbar
progressBarEl = app.progressbar.show(0, app.theme === 'md' ? 'yellow' : 'blue');
}
var progress = 0;
function simulateLoading() {
setTimeout(function () {
var progressBefore = progress;
progress += Math.random() * 20;
app.progressbar.set(progressBarEl, progress);
if (progressBefore < 100) {
simulateLoading(); //keep "loading"
}
else {
determinateLoading = false;
app.progressbar.hide(progressBarEl); //hide
}
}, Math.random() * 200 + 200);
}
simulateLoading();
}
// show inline determinate progressbar
$$('.show-determinate').on('click', function (e) {
showDeterminate(true);
});
// show root determinate progressbar
$$('.show-determinate-root').on('click', function (e) {
showDeterminate(false);
});
var infiniteLoading = false;
// show inline infinite progressbar
$$('.show-infinite').on('click', function () {
app.progressbar.show(app.theme === 'md' ? 'yellow' : 'blue');
setTimeout(function () {
infiniteLoading = false;
app.progressbar.hide();
}, 3000);
});
// show root infinite progressbar
$$('.show-infinite-root').on('click', function () {
app.progressbar.show('multi');
setTimeout(function () {
infiniteLoading = false;
app.progressbar.hide();
}, 3000);
});