Description

This is just a remake of my previous pen Progress Button Microinteractions with VueJS, for me to practice my skills in React.

I made the animation using GSAP. This library is really helping me a lot in animation. I really could do a "snappy" animation if I use this. Compare to my old one, by just using CSS. The performance is nice as well.

Another description

Having a microinteraction in your website is nice (I think). Especially when the designer did the animations just like "naturally".

The actual download must have a(n) URL, or should get the progress from a thread. This is just an example, so I used the animation to recreate the download process.

Font used

Raleway (Directly added from "Assets")

Live Demo