Component
Backup Button Animation in Framer
![Backup Button Animation in Framer](https://framerusercontent.com/images/FaTsn7g1AtIWdGQGXm8xopluMQI.jpg)
![Backup Button Animation in Framer](https://framerusercontent.com/images/FaTsn7g1AtIWdGQGXm8xopluMQI.jpg)
![Backup Button Animation in Framer](https://framerusercontent.com/images/FaTsn7g1AtIWdGQGXm8xopluMQI.jpg)
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.
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.
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.
![loading component's variants in Framer](https://framerusercontent.com/images/CMKWFcv7k7QUdUZ3GZVMWhYgtA.png)
Loading component's variants in Framer.
![loading component's variants in Framer](https://framerusercontent.com/images/CMKWFcv7k7QUdUZ3GZVMWhYgtA.png)
Loading component's variants in Framer.
![loading component's variants in Framer](https://framerusercontent.com/images/CMKWFcv7k7QUdUZ3GZVMWhYgtA.png)
Loading component's variants in Framer.
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.
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.
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.
![backup button component's variants in Framer](https://framerusercontent.com/images/SnA3DTgpQjWiQfwRDe8peH5FYY.png)
Backup button component's variants in Framer.
![backup button component's variants in Framer](https://framerusercontent.com/images/SnA3DTgpQjWiQfwRDe8peH5FYY.png)
Backup button component's variants in Framer.
![backup button component's variants in Framer](https://framerusercontent.com/images/SnA3DTgpQjWiQfwRDe8peH5FYY.png)
Backup button component's variants in Framer.