Animation

Static pies / rings with initial animation

(Reload to replay the initial animations)

$(".pp.animated").progressPie({
    mode:$.fn.progressPie.Mode.COLOR,
    animate: true
});

0 % 5 % 25 % 42 % 50 % 65 % 80 % 99 % 100 %

$(".pr.animated").progressPie({
    mode:$.fn.progressPie.Mode.COLOR, 
    strokeWidth: 1, 
    ringWidth: 3,
    animate: {
        dur: "3s"
    }
});

0 % 5 % 25 % 42 % 50 % 65 % 80 % 99 % 100 %

Animated state (value) changes

The following examples demonstrate the animation of a state change: Three pie or ring charts are initially set up as follows:

$("#ppstep").setupProgressPie({
    size: 50,
    scale: 2,
    mode: $.fn.progressPie.Mode.COLOR,
    valueData: "val",
    animate: true
}).progressPie();
$("#prstep").setupProgressPie({
    size: 100,
    strokeWidth: 10,
    ringWidth: 10,
    ringEndsRounded: true,
    strokeColor: "#ddd",
    color: "navy",
    valueData: "val",
    contentPlugin: "percent",
    contentPluginOptions: {
        color: "navy"
    },
    animate: {
        dur: "1.5s"
    }
}).progressPie();
$("#double").setupProgressPie({
    size: 100,
    mode: $.fn.progressPie.Mode.COLOR,
    strokeWidth: 8,
    ringWidth: 8,
    strokeColor: "#ddd",
    valueData: "val",
    animate: {dur: "3s"},
    animateColor: true,
    inner: {
        size: 75,
        valueData: "inner",
        animate: {dur: ".5s", calcMode: "linear"},
        animateColor: false
    }
}).progressPie();
<span id="ppstep" class="step" data-val="50"></span>
<span id="prstep" class="step" data-val="50"></span>
<span id="double" class="step double" data-val="50" data-inner="50"></span>

The buttons below will increase or decrease the data of those three diagrams (resp. the data of the inner pie of the third diagram, in case the check box “Apply to inner pie” is checked) and update the diagrams:

$("button.adj").click(function() {
    var inner = $("#chkInner:checked").length;
    var charts = $(inner ? ".step.double" : ".step");
    var oldVal = charts.data(inner ? "inner" : "val");
    var delta = $(this).data("delta");
    var newVal = oldVal + delta;
    newVal = Math.min(100, Math.max(0, newVal));
    charts.data(inner ? "inner" : "val", newVal).progressPie();
});

Since the animate option is set for all three example diagramms, their values will change smoothly.

Notes on SMIL animations and dash styles