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

Methods