Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It's 100% free, no registration required.

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

I want to create a simple circular progress animation with either Adobe After Effect or Adobe Flash or any other software that you may suggest. Something like this:


Assuming that the graphic assets are available and I only want the filling animation. I guess that I need some masking technique to create the filling motion. But I have no idea how to create a growing circular mask. If it was a horizontal progress, I would only need to resize the mask to reveal the underlying layer gradually. But what about this? Any suggestion would be appreciated.

share|improve this question
Couple code examples come to mind: and ( working example: ) – Joonas Jun 10 '13 at 10:52
up vote 0 down vote accepted

In a pinch, After Effects has a transition effect called "Clock Wipe"… !

share|improve this answer
Yep—hopefully these images will help!……… – markstuckert May 10 '14 at 20:00
@markstuckert, thanks. This is great. – Sam Rad May 11 '14 at 11:10

You can draw arbitrary shapes using Flash's Graphics class. That said, it sounds like you just need the final animation, so this is probably overkill, but if you drop this code on the timeline it will draw a pie style progress mask. You can edit the size (and increase the segments if it looks rough) using the consts.

import flash.display.Sprite;
import flash.display.GraphicsPath;

const INNER_RADIUS:Number = 50;
const OUTER_RADIUS:Number = 70;
const SEGMENTS_PER_RADIAN:uint = 10;

var maskGraphic:Sprite = new Sprite();
maskGraphic.x = stage.stageWidth * 0.5;
maskGraphic.y = stage.stageHeight * 0.5;

addEventListener(Event.ENTER_FRAME, tick);
var percentage:Number = 0;
function tick(e:Event):void {
    percentage += 0.5;

function drawProgress(percentage:Number):void {
    percentage = percentage > 100? percentage % 100 : percentage;;, 1.0);

    var outerEdge:GraphicsPath = new GraphicsPath();
    var innerEdge:GraphicsPath = new GraphicsPath();

    var radians:Number = percentage * 0.01 * Math.PI * 2;
    var divisions:uint = Math.round(radians * SEGMENTS_PER_RADIAN);
    var ang:Number;
    for (var i:uint = 0; i <= divisions; i++) {
        ang = i / divisions * radians;
        outerEdge.lineTo(Math.sin(ang) * OUTER_RADIUS, -Math.cos(ang) * OUTER_RADIUS);
        ang = (divisions - i) / divisions * radians;
        innerEdge.lineTo(Math.sin(ang) * INNER_RADIUS, -Math.cos(ang) * INNER_RADIUS);
    } * OUTER_RADIUS, -Math.cos(0) * OUTER_RADIUS);,;
share|improve this answer
This is cool David, and thanks for your contribution. I'll try it and report back. – Sam Rad Jun 12 '13 at 11:37

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.