Download this Premium Blogger Template. Download now!

Advanced Download Button Code with Progress Bar

Hello friends, today I will share with you the code for the Download Button with a beautiful Progress Bar. The code uses HTML, CSS and JavaScript.

Hello friends, today I will share with you the code for the Download Button with a beautiful Progress Bar. The code uses HTML, CSS and JavaScript. And my Blog also has many articles to share code about JavaScript as well as HTML and CSS. The most recent post Share code, template gallery with Lightbox for Blogspot you can access to see.

The Download Button has a Progress Bar which is the animation that appears after clicking and shows that the link is loading. Currently, this effect is being used quite a lot because it takes up little space on the website and looks very nice and professional.


You can see the demo above, the first thing you see will be the initial interface of the button and when you click on that button, its height and width will be changed to Progress Bar. When the Progress Bar completes the process, it will notify the completion and go to the download link.

Download Button code with Progress Bar

Share the Download Button code with Progress Bar

To add the Download Button with Progress Bar to your Blog or Website, you need to add the following HTML, CSS and JavaScript code to your Blog/Website.

  1. First, add the latest font awesome library:

  2. <link href='' rel='stylesheet' type='text/css'/>
  3. Second, add the HTML code to the display position:

  4. <div class="trickpk-button">       <div class="button-content">         <i class="fa-solid fa-cloud-arrow-down"></i>         <span data-link="" class="button-text">Download</span>       </div>   </div>
  5. Next add the following CSS code:

  6. <style>/* <![CDATA[ */ .trickpk-button{position:relative;margin:auto auto 0.9375rem;padding:10px;width:40%;min-width:300px;max-width:50%;background:#f5560c;border-radius:55px;cursor:pointer;box-shadow:0 5px 10px rgba(0,0,0,0.2);transition:all .4s cubic-bezier(0.68,-0.55,0.265,1.55);overflow:hidden}{height:10px;width:40%;min-width:300px;max-width:50%;padding:5px} .trickpk-button::before{content:"";position:absolute;top:0;left:-100%;height:100%;width:100%;background:#e6d010;border-radius:55px;transition:all 6s ease-in-out}{animation:layer 6s ease-in-out forwards} @keyframes layer { 100%{left:0} } .trickpk-button .button-content{height:100%;width:100%;display:flex;align-items:center;justify-content:center;transition:all .2s ease;transition-delay:.2s} .button-content{transform:translateY(60px)} .trickpk-button .button-content i,.trickpk-button .button-content .button-text{color:#fff;font-size:20px;font-weight:500} .trickpk-button .button-content .button-text{font-size:18px;margin-left:8px} /* ]]> */</style>

  7. And add the following script code in your blog:

  8. <script>//<![CDATA[       const trickpkbutton = document.querySelector(".trickpk-button"),           _link = document.querySelector('.button-text');     if (_link) {     }     trickpkbutton.addEventListener("click", () =>{       trickpkbutton.classList.add("active"); = "none";       setTimeout(()=>{         let _target = _link.getAttribute('data-link');         console.log(_target);         trickpkbutton.classList.remove("active");         trickpkbutton.querySelector("i").classList.replace("fa-cloud-arrow-down", "fa-trickpkeck");         trickpkbutton.querySelector(".button-text").innerText = "Completed!";         setTimeout(()=>{, '_blank');         setTimeout(()=>{   trickpkbutton.querySelector("i").classList.replace("fa-trickpkeck", "fa-cloud-arrow-down")         trickpkbutton.querySelector(".button-text").innerText = "Download"; = "auto";         },2000);           },1000);       },8000);     }); //]]></script>
  9. Finally, add this JavaScript to your website/blog:

  10. Accomplished!


Here is all the source code so you can add a Download Button with Progress Bar on your website/blog using HTML, CSS and JavaScript. If in the process of making an error or the code does not work, you can comment below and I will respond and help you as soon as possible!

Where do you want to donate?

Treat the creator to coffee by giving a small donation. click the arrow icon as above.

Post a Comment

© . All rights reserved. Distributed by Distributed by