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-color="bg-green"></div>
<div class="progress-bar" data-role="progress-bar" data-color="#ccc"></div>

Any size for progress bar

<div class="progress-bar small"></div>
<div class="progress-bar"></div>
<div class="progress-bar large"></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>

Options

Slider supported next options:

You can sets options over javascript or data-* api.