Progressbar Vue Component

Progressbar Vue component represents Progressbar element.

Progressbar Components

There are following components included:

• f7-progressbar

Progressbar Properties

Prop	Type	Description
<f7-progressbar> properties
progress	number	Determinate progress (from 0 to 100)
infinite	boolean	Whether progressbar is infinite or not (determinate)

Progressbar Methods

<f7-progressbar> methods
.set(progress, duration)	Set progressbar progress

Examples

<!-- Determinate Progressbar -->
<f7-progressbar :progress="20"></f7-progressbar>

<!-- Determinate Red Progressbar -->
<f7-progressbar :progress="30" color="red"></f7-progressbar>

<!-- Infinite Blue Progressbar -->
<f7-progressbar infinite color="green"></f7-progressbar>

<!-- Infinite Multi-color Progressbar -->
<f7-progressbar infinite color="multi"></f7-progressbar>

Renders to:

<!-- Determinate Progressbar -->
<span class="progressbar" data-progress="20"><span></span></span>

<!-- Determinate Red Progressbar -->
<span class="progressbar color-red" data-progress="30"><span></span></span>

<!-- Infinite Blue Progressbar -->
<span class="progressbar progressbar-infinite color-green"><span></span></span>

<!-- Infinite Multi-color Progressbar -->
<span class="progressbar progressbar-infinite color-multi"><span></span></span>