This is a read-only archive of the Framer Community on Facebook.

What is Framer? Join the Community
Return to index
Kevin Cannon
Posted Dec 30 - Read on Facebook

Circular Loading Anim.

Hey guys - any ideas how I would approach a circular loading progress indicator?S omething like this:
http://tympanus.net/codrops/2014/04/09/how-to-create-a-circular-progress-button/

I guess I could just integrate that directly, but was wondering if there's a more 'framer js' way? Masking a shape or something like that?

9 Comments

Koen Bok

Framer doesn't have shape animations built in, so I would go for 1) something canvas based like raphael.js or 2) make it in After Effects and use a video layer to control playback.

Kevin Cannon

Thanks for the tips. I think video or gif might be the way to go so for this time.

Jairo Avalos

Koen Bok new to coffee/javascript. Trying to use Raphael but console tells me it won't recognize it. At this line: # Creates canvas 320 × 200 at 10, 50
paper = Raphael(10, 50, 320, 200) it tells me it can't find the variable Raphael

Cemre Güngör

I've done this with framer! Basically divide the circle into 4 pieces and rotate a half-rectangle to reveal the darker colored circle

Jairo Avalos

Cemre Güngör mind posting a code sample?

Alexandre Saddi
Noam Elbaz

Jairo Avalos Koen Bok I'm looking at Raphael.js .... how do i integrate that with Framerjs? I would first add the script to the index.html... how can I use it with in framer studio to call on functions from rapheal.js?

Noam Elbaz

Jairo Avalos could you post a project with raphael js integrated so I can see how you did it?

Read the entire post on Facebook