Circular Progress Bars | Animation Tutorial
Get started with Origami here: • Origami Studio Intro Tutorial
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: / angeladelise