Animating a radial progress bar

By July 23, 2015 October 16th, 2015 Tutorial

In this Material Design animation tutorial, we’ll be covering Radial Progress bars. Radial progress bars are dope. They’re great for direct user input (i.e. setting a timer), dashboard updates, or for determining the ideal number of cats (that number may be quite low for you).

The technique that I’m sharing with you is my favorite and involves the ‘trim paths’ tool in After Effects. There is also what’s called a ‘radial wipe’ effect but the downside is that you lose the round corners and the animated gradient, both nice details, in my humble opinion.

I think the only thing that annoys me about this workflow is that fully editable paths from Photoshop aren’t supported on import into After Effects. (they come in as masks and need to be converted to be usable).

I spoke with one of the developers on the Adobe After Effects team about this and he was like, “yep, that’s how it is, son.” So there you go.

I show you how to handle this by employing ‘ye olde’ copy & pasting technique. I know you can handle it like the designer pimp you are.

The beautiful screen assets are from UI8 (minus the photos of me and fake names). If you’re jamming on a  project and need to save tons of time, grab the Bolt UI Kit (it’s $88) . It’s sexy, insanely well put together and completely plug and play.

Just a quick heads up, if you’re watching this and you’ve never used After Effects, and you’re all like, ‘yo what the eff is going on here, son?” head over here and watch my ‘UI Animation with Adobe After Effects – Fast Start’ video. This will get you up to speed. And if you’re ready to turn yourself into an ass kicking UI animation machine, you can pick up the ‘Rapid Prototyping with Adobe After Effects’ training.

Shout out to Sandeep VirkNick ButurishviliLina SeleznyovaJérémy PaulHanna JungColin Garven and Anton Aheichanka for their awesome UI animation inspiration and reference material. Great job guys! Follow them on Dribbble and keep up to date with their latest work.

Not ready to join? Join over 1,000 other designers and watch my FREE ‘Rapid Prototyping with Adobe After Effects Fast Start’ video series.

Even if you’ve never worked on a timeline or with keyframes, I walk you through the 7 steps that it takes to create professional UI animations from your Photoshop file. It’s the training I honestly wish I had when I started learning this stuff. It’s free. It’s baddass. And it’s way easier than you think. [aweber_opt_in opt_in_id=”1234795980″ listname=”uxm-master-list” redirect=”” meta_redirect_onlist=”” adtracking=”Early_notification” split=”” button_text=”Get FREE training”]