Progress Barcomponent

This component require metro-progressbar.js.

<div class="progress-bar" data-role="progress-bar" data-value="10"></div>
<div class="progress-bar" data-role="progress-bar" data-value="20" data-color="bg-green"></div>
<div class="progress-bar" data-role="progress-bar" data-value="50" data-color="bg-red"></div>
<div class="progress-bar" data-role="progress-bar" data-value="75" data-color="bg-pink"></div>
<div class="progress-bar" data-role="progress-bar" data-value="100" data-color="#ccc"></div>

Any size for progress bar

<div class="progress-bar small" data-role="progress-bar" data-value="10"></div>
<div class="progress-bar" data-role="progress-bar" data-value="20" data-color="bg-green"></div>
<div class="progress-bar large" data-role="progress-bar" data-value="50"></div>

You can activate widget manually or auto with data-* api.

Activate widget with Javascript

$("#componennt_id").progressbar({
    value: int // progress value, default 0
    color: string, // existing class (bg-*) or color schema (#NNNNNN)
    onchange: function(val){...}
});

Set value with Javascript

var pb = $("#componennt_id").progressbar();
    pb.progressbar('value', 75);

Set color with Javascript

var pb = $("#componennt_id").progressbar();
    pb.progressbar('color', '#000');

Activate widget with API

<div class="progress-bar" data-role="progress-bar" data-value="75" data-color="bg-pink"></div>