Preloader
Framework7 has a nice preloader indicator. Preloader is made with SVG and animated with CSS so it can be easily resized.
Preloader Layout
Layout is pretty simple:
<div class="preloader"></div>
This layout will work if you put preloader on a page before its initialization. If you need to add it page later or to use in custom layouts then use full preloader layout. It is different for each theme:
iOS Theme Preloader Layout
<div class="preloader">
<span class="preloader-inner">
<span class="preloader-inner-line"></span>
<span class="preloader-inner-line"></span>
<span class="preloader-inner-line"></span>
<span class="preloader-inner-line"></span>
<span class="preloader-inner-line"></span>
<span class="preloader-inner-line"></span>
<span class="preloader-inner-line"></span>
<span class="preloader-inner-line"></span>
</span>
</div>
MD Theme Preloader Layout
<div class="preloader">
<span class="preloader-inner">
<svg viewBox="0 0 36 36">
<circle cx="18" cy="18" r="16"></circle>
</svg>
</span>
</div>
Preloader Colors
Preloader supports all default colors. So to change its color just add color-[color]
class to preloader element.
MD theme also supports special color-multi
color to make preloader multi-color.
<!-- Red preloader -->
<div class="preloader color-red"></div>
<!-- Green preloader -->
<div class="preloader color-green"></div>
<!-- Multicolor preloader -->
<div class="preloader color-multi"></div>
Preloader Overlay / Preloader API
It is also possible to call special Preloader overlay which is useful if you need to block user actions until something is loaded. This kind of preloader will appear in front of app and block any user actions behind it.
Let's look at related app methods to work with Preloader overlay
app.preloader.show(color)- show Preloader overlay
- color - string. Preloader color, one of the default colors
app.preloader.hide()- hide Preloader overlay
app.preloader.showIn(el, color)- show Preloader overlay in specified element
- el - HTMLElement or string (with CSS Selector). Element where preloader overlay will be added
- color - string. Preloader color, one of the default colors
app.preloader.hideIn(el)- hide Preloader overlay in specified element
- el - HTMLElement or string (with CSS Selector). Element where preloader overlay should be removed from
For example:
var app = new Framework7();
// Show preloader before Ajax request
app.preloader.show();
// Perform Ajax request
fetch('someurl.html').then(() => {
// Hide preloader when Ajax request completed
app.preloader.hide();
});
Opening Preloader overlay will also add with-modal-preloader
class to element.
CSS Variables
Below is the list of related CSS variables (CSS custom properties).
:root {
--f7-preloader-modal-padding: 8px;
--f7-preloader-modal-bg-color: rgba(0, 0, 0, 0.8);
}
.ios {
--f7-preloader-color: #6c6c6c;
--f7-preloader-size: 20px;
--f7-preloader-modal-preloader-size: 34px;
--f7-preloader-modal-border-radius: 5px;
}
.md {
--f7-preloader-color: #757575;
--f7-preloader-size: 32px;
--f7-preloader-modal-preloader-size: 32px;
--f7-preloader-modal-border-radius: 4px;
}
Examples
<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>如何添加一个活动指示器?Framework7有一个很好的活动指示器。F7预加载器是使用SVG制作的,并使用CSS进行动画处理,因此可以轻松调整大小。</p>
</div>
<div class="block-title">默认</div>
<div class="block block-strong-ios block-outline-ios demo-preloaders align-items-stretch text-align-center">
<div class="grid grid-cols-4 grid-gap">
<div>
<div class="preloader"></div>
</div>
<div class="demo-black-col">
<div class="preloader color-white"></div>
</div>
<div>
<div class="preloader preloader-large"></div>
</div>
<div class="demo-black-col">
<div class="preloader preloader-large color-white"></div>
</div>
</div>
</div>
<div class="block-title">颜色加载器</div>
<div class="block block-strong-ios block-outline-ios text-align-center">
<div class="grid grid-cols-4 grid-gap">
<div>
<div class="preloader text-color-red"></div>
</div>
<div>
<div class="preloader text-color-green"></div>
</div>
<div>
<div class="preloader text-color-orange"></div>
</div>
<div>
<div class="preloader text-color-blue"></div>
</div>
</div>
</div>
<div class="block-title">多个颜色</div>
<div class="block block-strong-ios block-outline-ios text-align-center">
<div class="preloader color-multi"></div>
</div>
<div class="block-title"> 对话框加载器</div>
<div class="block block-strong-ios block-outline-ios">
<p>使用<b>app.preloader.show()</b>可以显示带有预加载指示器的小覆盖层.</p>
<p>
<a class="button button-fill" @click=${openIndicator}>加载等待图</a>
</p>
<p>使用 <b>app.dialog.preloader()</b> 可以显示带有预加载指示器的对话框模态框</p>
<p>
<a class="button button-fill" @click=${openDialog}>提示文字+加载图</a>
</p>
<p>使用 <b>app.dialog.preloader('My text...')</b> 可以显示带有自定义标题的对话框预加载器模态框。</p>
<p>
<a class="button button-fill" @click=${openCustomDialog}>大提示文字+等待图</a>
</p>
</div>
</div>
</div>
</template>
<style>
.preloader-large {
width: 42px;
height: 42px;
}
.demo-preloaders .grid>div {
padding: 5px;
line-height: 42px;
}
.demo-black-col {
background: #000;
}
</style>
<script>
export default (props, { $f7 }) => {
const openIndicator = () => {
$f7.preloader.show();
setTimeout(function () {
$f7.preloader.hide();
}, 2000);
}
const openDialog = () => {
$f7.dialog.preloader();
setTimeout(function () {
$f7.dialog.close();
}, 2000);
}
const openCustomDialog = () => {
$f7.dialog.preloader('My text...');
setTimeout(function () {
$f7.dialog.close();
}, 2000);
}
return $render;
};
</script>