Back to Browse

Circular Progress Bars | Animation Tutorial

2.4K views
Jan 21, 2020
9:13

Get started with Origami here: https://www.youtube.com/watch?v=rPpjk9PbkCE&t=181s In this video I show you how to create a circular progress loader for your software or application design. I use Origami to create these animation assets and then hand them off to development to be incorporated within the digital product. I go over how to add a circle loading animation, how to include time intervals so the progress changes over time and how to create a success state by transforming the color and by adding a check icon. I show you: 0:32 How to add a progress ring 0:51 How to change the color 1:22 How to add a timer patch 1:50 How to add a wait patch 2:18 How to add an option switch patch 2:37 How to add an option picker patch 3:32 How to set multiple values to one output 4:25 How to add a pop animation 5:55 How to add a loader success state 6:11 How to add logic statements 6:39 How to add a color transition 7:11 How to add a check icon 7:45 How to improve the interaction design Want to improve designer to development handoff? View my Sketch to Zeplin workflow here: https://www.youtube.com/watch?v=D3ZF2... Let's Connect Dribbble: https://dribbble.com/angeladelise Blog: https://medium.com/@angeladelise

Download

0 formats

No download links available.

Circular Progress Bars | Animation Tutorial | NatokHD