进度条
除了预加载器Framework7 还提供了精美的动画确定性和无限/非确定性进度条,以指示活动状态。
确定性进度条
当进度条是确定性的时,它会指示操作需要多长时间,当完成的百分比可以检测到时。
让我们看看确定性进度条的布局:
<div class="progressbar" data-progress="20">
<span></span>
</div>
其中data-progress="20"- 当前进度(以百分比表示)。请注意,此数据属性仅在页面加载时设置进度。如果您需要稍后更改它,则应通过 API 进行。
无限进度条
当进度条是无限/非确定性时,它会请求用户等待某个操作完成,当没有必要指示它需要多长时间时。
让我们看看无限进度条的布局:
<div class="progressbar-infinite"></div>
进度条颜色
进度条支持所有默认颜色之一. 所以要改变它的颜色,只需向预加载器元素添加color-[color]
类到进度条元素。
<!-- 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>
进度条 API
进度条带有 API,允许您控制进度条的进度、显示和隐藏。让我们看看相应的 App 的属性和方法:
app.progressbar.set(el, progress, duration)- 设置确定性进度条的进度。
- el - 字符串或HTMLElement. 进度条元素或包含进度条元素的元素。如果是字符串,则是此类元素的 CSS 选择器。
- 进度 - 数字. 进度(从 0 到 100 的百分比)
- 持续时间 - 数字. 进度变化动画的过渡持续时间(以毫秒为单位)
- 此方法返回 Progressbar HTMLElement
app.progressbar.set(progress, duration)- 设置 app 根元素下确定性进度条的进度。
- 进度 - 数字. 进度(从 0 到 100 的百分比)
- 持续时间 - 数字. 进度变化动画的过渡持续时间(以毫秒为单位)
- 此方法返回 Progressbar HTMLElement
app.progressbar.show(el, 进度, color)- 创建并显示或仅显示(如果已经显示)进度条。
- el - 字符串或HTMLElement. 进度条元素容器或包含进度条元素的元素。如果是字符串,则是此类元素的 CSS 选择器。可选
- 进度 - 数字. 进度(从 0 到 100 的百分比)。可选
- color - 字符串. 进度条的颜色,例如 "white"、"red" 等,来自可用颜色主题之一. 可选
- 此方法返回 Progressbar HTMLElement
所有参数在这里都是可选的:
- 如果省略
el
参数,它将查找(或创建)app 根下的进度条元素 - 如果省略
progress
,它将显示/创建无限进度条 - 如果省略所有参数,则它将在 app 根下以默认颜色显示/创建无限进度条
app.progressbar.hide(el)- 隐藏进度条。
- el - 字符串或HTMLElement. 进度条元素容器或包含进度条元素的元素。如果是字符串,则是此类元素的 CSS 选择器。如果未指定,则它将查找 app 根元素下的此类元素。
CSS 变量
以下是相关CSS 变量(CSS 自定义属性) 的列表。
注意,注释掉的变量默认未指定,其值在这种情况下是它们回退到的值。
:root {
/*
--f7-progressbar-progress-color: var(--f7-theme-color);
*/
}
.ios {
--f7-progressbar-height: 4px;
--f7-progressbar-border-radius: 4px;
--f7-progressbar-bg-color: rgba(0, 0, 0, 0.3);
}
.ios .dark,
.ios.dark {
--f7-progressbar-bg-color: rgba(255, 255, 255, 0.3);
}
.md {
--f7-progressbar-height: 4px;
--f7-progressbar-border-radius: 0px;
}
.md,
.md .dark,
.md [class*='color-'] {
--f7-progressbar-bg-color: rgba(var(--f7-theme-color-rgb), 0.5);
}
示例
progressbar.html
<template>
<div class="page">
<div class="navbar">
<div class="navbar-bg"></div>
<div class="navbar-inner sliding">
<div class="title">Progress Bar</div>
</div>
</div>
<div class="page-content">
<div class="block">
<p>In addition to <a href="/preloader/">Preloader</a>, Framework7 also comes with fancy animated determinate and
infinite/indeterminate progress bars to indicate some activity.</p>
</div>
<div class="block-title">Determinate Progress Bar</div>
<div class="block block-strong-ios block-outline-ios">
<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><span data-progress="10" class="progressbar" id="demo-inline-progressbar"></span></p>
<p class="segmented segmented-raised">
<a class="button" @click=${()=> setInlineProgress(10)}>10%</a>
<a class="button" @click=${()=> setInlineProgress(30)}>30%</a>
<a class="button" @click=${()=> setInlineProgress(50)}>50%</a>
<a class="button" @click=${()=> setInlineProgress(100)}>100%</a>
</p>
</div>
<div>
<p>Inline determinate load & hide:</p>
<p id="demo-determinate-container"></p>
<p>
<a href="" class="button button-fill" @click=${()=> showDeterminate(true)}>Start Loading</a>
</p>
</div>
<div>
<p>Overlay with determinate progress bar on top of the app:</p>
<p>
<a href="" class="button button-fill" @click=${()=> showDeterminate(false)}>Start Loading</a>
</p>
</div>
</div>
<div class="block-title">Infinite Progress Bar</div>
<div class="block block-strong-ios block-outline-ios">
<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>
<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-fill" @click=${()=> showInfinite(false)}>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-fill" @click=${()=> showInfinite(true)}>Start Loading</a>
</p>
</div>
</div>
<div class="block-title">Colors</div>
<div class="list list-strong-ios list-outline-ios list-dividers-ios 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>
</div>
</div>
</template>
<script>
export default (props, { $f7, $el, $onMounted, $onBeforeUnmount }) => {
let determinateLoading = false;
let infiniteLoading = false;
const setInlineProgress = (value) => {
$f7.progressbar.set('#demo-inline-progressbar', value);
}
const showDeterminate = (inline) => {
if (determinateLoading) return;
determinateLoading = true;
var progressBarEl;
if (inline) {
progressBarEl = $f7.progressbar.show('#demo-determinate-container', 0);
} else {
progressBarEl = $f7.progressbar.show(0);
}
var progress = 0;
function simulateLoading() {
setTimeout(function () {
var progressBefore = progress;
progress += Math.random() * 20;
$f7.progressbar.set(progressBarEl, progress);
if (progressBefore < 100) {
simulateLoading(); //keep "loading"
}
else {
determinateLoading = false;
$f7.progressbar.hide(progressBarEl); //hide
}
}, Math.random() * 200 + 200);
}
simulateLoading();
}
const showInfinite = (multiColor) => {
if (infiniteLoading) return;
infiniteLoading = true;
if (multiColor) {
$f7.progressbar.show('multi');
} else {
$f7.progressbar.show();
}
setTimeout(function () {
infiniteLoading = false;
$f7.progressbar.hide();
}, 3000);
}
return $render;
};
</script>