Progressbar Svelte Component
Progressbar Svelte component represents Progressbar element.
Progressbar Components
There are following components included:
Progressbar
Progressbar Properties
Prop | Type | Description |
---|---|---|
<Progressbar> properties | ||
progress | number | Determinate progress (from 0 to 100) |
infinite | boolean | Whether progressbar is infinite or not (determinate) |
Progressbar Methods
<Progressbar> methods | |
---|---|
.set(progress, duration) | Set progressbar progress |
Examples
<Page>
<Navbar title="Progress Bar"></Navbar>
<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>
</Block>
<BlockTitle>Determinate Progress Bar</BlockTitle>
<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><Progressbar progress={10} id="demo-inline-progressbar"></Progressbar></p>
<Segmented raised>
<Button onClick={()=>{setInlineProgress(10)}}>10%</Button>
<Button onClick={()=>{setInlineProgress(30)}}>30%</Button>
<Button onClick={()=>{setInlineProgress(50)}}>50%</Button>
<Button onClick={()=>{setInlineProgress(100)}}>100%</Button>
</Segmented>
</div>
<div>
<p>Inline determinate load & hide:</p>
<p id="demo-determinate-container"></p>
<p>
<Button raised onClick={()=>{showDeterminate(true)}}>Start Loading</Button>
</p>
</div>
<div>
<p>Overlay with determinate progress bar on top of the app:</p>
<p>
<Button raised onClick={()=>{showDeterminate(false)}}>Start Loading</Button>
</p>
</div>
</Block>
<BlockTitle>Infinite Progress Bar</BlockTitle>
<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>
<Progressbar infinite></Progressbar>
</p>
<p>Multi-color infinite progress bar</p>
<p>
<Progressbar infinite color="multi"></Progressbar>
</p>
<div>
<p>Overlay with infinite progress bar on top of the app</p>
<p id="demo-infinite-container"></p>
<p>
<Button raised onClick={()=>{showInfinite(false)}}>Start Loading</Button>
</p>
</div>
<div>
<p>Overlay with infinite multi-color progress bar on top of the app</p>
<p>
<Button raised onClick={()=>{showInfinite(true)}}>Start Loading</Button>
</p>
</div>
</Block>
<BlockTitle>Colors</BlockTitle>
<List simpleList>
<ListItem>
<Progressbar color="blue" progress={10}></Progressbar>
</ListItem>
<ListItem>
<Progressbar color="red" progress={20}></Progressbar>
</ListItem>
<ListItem>
<Progressbar color="pink" progress={30}></Progressbar>
</ListItem>
<ListItem>
<Progressbar color="green" progress={80}></Progressbar>
</ListItem>
<ListItem>
<Progressbar color="yellow" progress={90}></Progressbar>
</ListItem>
<ListItem>
<Progressbar color="orange" progress={100}></Progressbar>
</ListItem>
</List>
</Page>
<script>
import {f7, Page, Navbar, Block, BlockTitle, Progressbar, Segmented, Button, List, ListItem} from 'framework7-svelte';
let determinateLoading = false;
let infiniteLoading = false;
function setInlineProgress(value) {
f7.progressbar.set('#demo-inline-progressbar', value);
}
function showDeterminate(inline) {
if (determinateLoading) return;
determinateLoading = true;
let progressBarEl;
if (inline) {
progressBarEl = f7.progressbar.show('#demo-determinate-container', 0);
} else {
progressBarEl = f7.progressbar.show(0, f7.theme === 'md' ? 'yellow' : 'blue');
}
let progress = 0;
function simulateLoading() {
setTimeout(() => {
const 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();
}
function showInfinite(multiColor) {
if (infiniteLoading) return;
infiniteLoading = true;
if (multiColor) {
f7.progressbar.show('multi');
} else {
f7.progressbar.show(f7.theme === 'md' ? 'yellow' : 'blue');
}
setTimeout(() => {
infiniteLoading = false;
f7.progressbar.hide();
}, 3000);
}
</script>
当前内容版权归 Framework7 或其关联方所有,如需对内容或内容相关联开源项目进行关注与资助,请访问 Framework7 .