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

What is Framer? Join the Community
Return to index
Evan Knight
Posted Jun 13 - Read on Facebook

Is it possible to draw-on a circle using a line/border? Trying to recreate this gif.

http://i.imgur.com/XoABaGP.gif

25 Comments

Jonas Treub

Creating shapes is not build into the framework itself but since Framer is web based you could use SVG or Canvas. I would go with SVG. If you search this group on SVG all kind of interesting implementations will pop up. Good luck

Jordan Robert Dobson

I created something that probably does close to what you want. Search for my SVG Animation post.

Jordan Robert Dobson

Here's the post you want... in case someone comes across this again: https://www.facebook.com/groups/framerjs/permalink/684997204960687/

Andrew Nalband

Try this out. I'm using it in one of my prototypes and it looks great http://thatedchao.com/published/2014/09/27/framer.html

Andrew Nalband

Actually, I had to modify his somewhat - try this http://share.framerjs.com/xqh1w4j4qgcc/

Andrew Nalband

Here it is with a little animation at the end filling in the circle http://share.framerjs.com/fnax2xqod4lb/

Andrew Nalband

And while I'm at it, why not add in Andreas Wahlström's really cool FontAwesome module to animate a little check mark onto the screen when it's done.

Andrew Nalband

Here's a little animated gif of the animation http://giphy.com/gifs/3o85xL92eSa9LoGPYs/

Andrew Nalband

Oops, forgot to attach the project. I also added in some sound using Black Ray's UISound module http://share.framerjs.com/euqtekt5j24k/

Andrew Nalband

Try playing around with this value "circleDia = 100". The stroke size and the size of the check mark will automagically adjust to be appropriate for whatever size you want to make the loader

Black Ray

Andrew Nalband Awesome!

Irwansyah

That is one cool trick Andrew Nalband!

Andrew Nalband

Thanks, Black Ray and Irwansyah! By the way, Black Ray - I really like the sounds in your project. Where did you get them?

Black Ray

Andrew Nalband Two of them from "SFX Monkey Prototype Sound Pack", the rest one is my handmade :p
https://sfxmonkey.com

Andrew Nalband

.

http://share.framerjs.com/hr1kcz0r9a8r/

I added some more properties that are easy to adjust and more sound:

# set the color of your progress bar, stroke and background
progressBarColor = "#41D19C"
strokeColor = "#ddd"
bgColor = "white"

# set the diameter of the circle - the size of the stroke in the progress bar and the checkmark will adjust accordingly
circleDiameter = 300

#set the speed of the progress bar to whatever you'd like
speed = 0.6

You can also touch the layer now to initiate the animation, and there are some animations that respond to your touch.

John McKain

Andrew Nalband You have made excellent work with your .GIF at http://giphy.com/gifs/3o85xL92eSa9LoGPYs/ Do you have a higher-resolution version of the .GIF with a transparent background? Thank you very much! This would really help me with my project. :)

Andrew Nalband

Hi John, I recorded that from my screen using the framer project in the comments above, so that's the source material. What's your project ?

John McKain

Andrew Nalband I am creating a game using the Unity game engine. I would like to use your GIF as a loading animation. Unfortunately, I cannot just implement a framer project directly in Unity, so that's why I need a transparent GIF (which Unity supports). Thanks for your reply! :)

John McKain

Andrew Nalband 2 weeks later, I still need your transparent GIF... :(

Andrew Nalband

Hi John, I created that with a screen recording of a framer project, so I never made a transparent version.

John McKain

Andrew Nalband Can you create one? We would really appreciate it.

Andrew Nalband

Hi John, is this for a game you're selling to people?

John McKain

Andrew Nalband The game is free, but contains ads.

John McKain

Andrew Nalband What do you think?

John McKain

Andrew Nalband Unfortunately, I'm still waiting for a response...

Read the entire post on Facebook