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>