(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 %
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.
animate
may be set to true in order to activate default animation,dur
specifying the duration of the animation. (Default is 1 second.)$.fn.progressPie.defaultAnimationAttributes
.
Besides the default duration of 1 second, you'll find there the default settings for the varying animation
speed, defined via a bezier spline: You'll notice that the animation begins rather fast and gradually
(but not linearly) slows down to a halt. Actually, the halt gets so slow, the animation seems much shorter than
the configured animation duration. Of course, you may also alter these settings, for explanations
please refer to SMIL documentations. The inner pie of the last example demonstrates a change of animation
mode by switching to simple linear animation (with a much shorter duration of half a second).
animate
option for the inner pie, it inherits the animation
setup of the outer!value-dependent color
(like two of the three examples have),
i.e. your diagram has no fix color, but changes color as it changes its value,
you can choose whether the color should change immediately (only the length
of the arc will be animated then) or wheter the color transition should also be animated
along with the value angle (color animation).
animate
option you may specify a second, boolean option named
animateColor
. Set it to true
to enforce color animation,
or to false
in order to disable it.animateColor
option at all (see first example),
the color animation will neither be completely disabled nor enforced, but will depend
on the context (“automatic mode”): The
color will not be animated during the initial animation, i.e. when (re-)loading the page.
Any animation on value change, however, will use a color transition.animateColor: true
also play a color animation on (re-)load of the page: It
will gradually change its color from red to yellow.animateColor: false
:
Only the value is animated, the color changes abruptly upon pressing any button below.
stroke-dasharray
and
stroke-dashoffset
styles. The consequence is, the use of this animation would conflict
with manually styling the foreground pie/ring with these CSS properties.
To be more precise: Should you try to define a CSS rule like
progresspie-foreground { dash-strokearray: 5, 5}
in order to draw a dashed ring or pie segment, this rule will not show any effect – unless
you add the !important
directive, which on the other hand, would break the animation.