Language: ENCN

Progress Bar Vue Component

Progress Bar Vue component represents Progress Bar element.

Usage example

<!-- Determinate Progress Bar -->
<f7-progressbar :progress="20"></f7-progressbar>
 
<!-- Determinate Red Progress Bar -->
<f7-progressbar :progress="30" color="red"></f7-progressbar>
 
<!-- Infinite Blue Progress Bar -->
<f7-progressbar infinite color="blue"></f7-progressbar>
 
<!-- Infinite Multi-color Progress Bar -->
<f7-progressbar infinite color="multi"></f7-progressbar>

Renders to:

<!-- Determinate Progress Bar -->
<span class="progressbar" data-progress="20"><span></span></span>
 
<!-- Determinate Red Progress Bar -->
<span class="progressbar color-red" data-progress="30"><span></span></span>
 
<!-- Infinite Blue Progress Bar -->
<span class="progressbar progressbar-infinite color-blue"><span></span></span>
 
<!-- Infinite Multi-color Progress Bar -->
<span class="progressbar progressbar-infinite color-multi"><span></span></span>

Properties

Prop Type Default Description
color string Progress bar color. One of default colors
progress number Determinate progress (from 0 to 100)
infinite boolean Whether progress bar is infinite or not (determinate)

Methods

.set(progress, duration) set progress bar progress