About The Resource

I created this button animation in Framer by nesting multiple components.

The first component is for the loading icon. It has three variants: Loading, Complete, and Idle. I connected these variants with interactions to get a component that loads perfectly, so we can nest it within our main button component.

Then, the button component also gets three variants: Back Up, Backing Up, and Done. For each variant, I change the variant of the loader component as well. By connecting these variants with interactions, we get a nice animation on click.