Axure : How to make a circular timer?

Question

I'd like to know how to make this animation on Axure 8

Thanks !

Answer 1

I just recently started playing with Axure so there may be a better way to do this, but here’s what I came up with:

Create 2 rings:

• Start with 2 circles, one slightly smaller than the other. Center one over the other, select both and hit the “subtract” button in the Style pane to essentially cut a hole in the larger circle. Voila, a ring.
• Copy and paste that ring so you’re working with 2. Fill one ring with whatever you want your inactive state color to be (say, gray) and fill the other with whatever you want your active state to be (say, light blue).
• Kill the shape outline or make it the same color as the fill

Cut those rings in half

• Place a rectangle over exactly half of each circle (for this example I halved mine vertically, but it an also be done horizontally). Use the same “subtract” button to remove half of each ring. You should be left with 1 gray half ring and 1 blue.

Make new full rings out of 2 half rings

• Copy and paste each half ring so you’re left with 2 gray and 2 blue half rings.
• Rotate 1 of each color half rings 180 degrees
• Align the gray half rings so you have what looks like 1 whole gray ring. Do the same with the blue. Group each of them, for now.
• Name each half ring in the Outline pane, for easy reference later (left gray, right gray, left blue, right blue).

Align the rings & set the order

• Put the resulting gray ring directly over the blue one, so all you can see is the gray ring.
• Ungroup the rings and set the order as follows in the Outline pane, from top to bottom: Right gray, right blue, left gray, left blue.

Now comes the fun part

• Select the right gray half ring and go to properties. I’m using “On Load” but pick whatever works for you and set up the following case:

• Rotate right gray 180 degrees, clockwise, anchor right, Animate - linear, 1000ms

• Wait 1000ms
• Hide right gray (no animation)
• Rotate left gray 180 degrees, clockwise, anchor right, Animate - linear, 1000ms

The end result is the right gray half ring rotates around, revealing the blue ring beneath, but it appears as if the blue is simply filling the gray space. Once that half ends it’s 180 degree rotation and ends up on the left side, it disappears and the left gray half ring starts its rotation. Since we set it behind the right blue half ring, it tucks behind it as it moves, revealing the rest of the blue ring as it goes.

As I mentioned I’m fairly new to Axure, so if anyone has any suggestions on how to do this more efficiently, they’re more than welcome!

Answer 2

Here is another solution using a different approach. Namely a ridiculous amount of timed animations: https://www.dropbox.com/s/52cuq8opsmquni0/Circular-Loader-Animated.rp?dl=0

Two have circles can be animated. Each half has set the rotate origin to the common center. A shape covers the first half of the animation.

Not a very reliable solution, just a proof whats possible with the new animation features.

Answer 3

You could use the animated gif. But instead of displaying directly, you could apply it to the selected state. You add an action to select the image and the gif starts running.

Add a timer and reset when done. See this quick and dirty example. https://www.dropbox.com/s/4hceqrbsbvyri8k/Circular-Timer.rp?dl=0