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.

scroll to top
%d bloggers like this: