Animate

[Teddy95]

Can I animate the element?

For example: From value 0 to 80 Duration: 1500

Best, Andre

[rvagraphics]

I would also like to see this.

[Teddy95]

I have found a solution:

html:

<div id="bars">
    <div class="barInner">
        <div class="circular-bar">
            <input class="knob" value="0" data-val-after="75" />
            <div class="circular-bar-content">
                <strong class="barStrong">First circle</strong>
                <label class="barLabel">0%</label>
            </div>
        </div>
    </div>
    <div class="barInner">
        <div class="circular-bar">
            <input class="knob" value="0" data-val-after="95" />
            <div class="circular-bar-content">
                <strong class="barStrong">Second Circle</strong>
                <label class="barLabel">0%</label>
            </div>
        </div>
    </div>
</div>

javascript:

$(document).ready(function() {
    $(".knob").knob({
        readOnly: true,
        lineCap: 'butt',
        fgColor: '#666666',
        thickness: '.01',
        font: 'arial'
    });
});

$(document).ready(function() {
    $(".knob").val(0).trigger('change');
    $(".knob").each(function () {
            $(this).animate({
                    value: $(this).attr("data-val-after")
            }, {
                    duration: 1500,
                    easing: 'swing',
                    progress: function () {
                        $(this).val(Math.round(this.value)).trigger('change');
                        $(this).parent().parent().children('.circular-bar-content').children('.barLabel').html(this.value + '%');
                    }
            });
      });
});

css:

#bars {
    margin: 80px 0;
    width: 100%;
    overflow: hidden;
}

.barInner {
    width: 25%;
    float: left;
}

div.circular-bar {
    margin: 0 auto;
    margin-bottom: 25px;
    min-height: 210px;
    width: auto;
    display: inline-block;
}

div.circular-bar input.knob {
    visibility: hidden;
}

div.circular-bar strong {
    display: block;
    font-weight: 600;
    font-size: 27px;
    line-height: 30px;
    margin-bottom: 2px;
}

div.circular-bar label {
    display: block;
    font-weight: 100;
    font-size: 22px;
    line-height: 20px;
    margin-top: 2px;
}

div.circular-bar-content {
    margin-bottom: 70px;
    margin-top: -125px;
    text-align: center;
}

.barStrong {
    font-family: arial;
    color: #333333;
    cursor: default;
}

.barLabel {
    font-family: arial;
    color: #999999;
    cursor: default;
}

[KillerSquid]

It would be fantastic to have this as a built in feature. Thank you!