Pie charts code animation

I would like to make a circular timer. For this purpose I thought of using a pie charts. Is there a way to animate it from 0° to 360°?
I know I can do it with two animated half circle, but I would rather do it with code if it is possible.
Thanks by avance

That’s a tricky one. My initial thought was to use a gif, but then I jumped to SVGs to find a solution.
There are some hurdles here, but its possible with animated SVG.

Axure uses the img-Tag to place SVG and this results in some restrictions on how animation have to be formatted. In short you have to use css selectors and attributes to animate the SVG. Lucky for us there is a css-attribute called dash-array. Basically we make a dashed stroke and animate it.

So my solution is in Code – its just SVG Code.

<?xml version="1.0" encoding="UTF-8"?>
<svg width="84px" height="84px" viewBox="0 0 84 84" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
	#oval {
	  animation: loading 5s linear 1;
	@keyframes loading {
      0% {
        stroke-dasharray: 0,1000
	  100% {
        stroke-dasharray: 314,1000  
        <!-- full circle = 2 x Radius * Pi -->
    <desc>Created with Sketch.</desc>
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-dasharray="100,100">
        <g id="loading" stroke="#979797" stroke-width="3">
            <circle id="oval" cx="42" cy="42" r="40"></circle>

Here is the demo-file.
animated-spinner.rp (44.5 KB)

I hope this helps or is at least interesting…

To recreate: Save the code as “loading.svg” and import it to axure.

Like this? This is an animation I created that looks like a pie chart growing and filling.

Thank you, it’s exactly what I was searching for :wink:
Little question : I don’t know why, at last the circle “broke”, I can’t see where is this tiny problem

Thanks for your help, very didactic.

Has anyone taken this further? Colors and with separated pie chart variables.