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