Download Button with Circular Progress Indicator

Worried about licensing?

Do you have right license for your templates and fonts?

Head over to our partner Envato Elements and unlock unlimited downloads of over 50 million digital assets with full commercial licensing.

  • 50+ Million Assets with Unlimited Downloads
  • Templates, Addons, Fonts, Footage, Photos, Brushes, Presets & More
  • Full Commercial licensing for client work

Get ultimate peace of mind!

Get Started Now
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.