Download Button with Circular Progress Indicator

Image: Download Button with Circular Progress Indicator GIF

Here is a fancy little download button that has a faint neon glow on hover and on clicking it the button transforms into a circular loader like interface to show the progress of the download. There is a stop button on it if you want to stop the download and on completion, you get a confirmation message stating the download was successful. It was created by Luis Manuel based on the Dribbble shot by Pedro Aquino.

It uses anime.js for animation and segment.js for SVG path animations.

You can find the project on Github. Check out the Demo and Tutorial on scotch.io.

Posted by:Saijo George

Digital Marketer with a strong focus on technical SEO and design. One of the top 100 makers on Producthunt, co-organizer of the SEO Meetup in Melbourne, an instructor at General Assembly. Worked with brands like Envato, AEON. Currently the SEO Strategy Director at Supple.