Share the 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. 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 below, 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.

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.

First add the HTML code to the display position:

< div  class = "ch-button" > 
      < div  class = "button-content" > 
        < i  class = "fa-solid fa-cloud-arrow-down" > </ i > 
        < span  data-link = "https: //www.themebiz.net/"  class = "button-text" > Download </ span > 
      </ div > 
  </ div >

Next add the following CSS code:

< style > /* <![CDATA[ */ 
.ch-button { position :relative; margin :auto auto 0.9375rem ; padding : 10px ; width : 40% ; min-width : 300px ; max-width : 50% ; background : #7D2AE8 ; 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}
 .ch-button .active { height : 10px ; width : 40% ; min-width : 300px ; max-width : 50% ; padding : 5px }
 .ch-button ::before { content : "" ; position :absolute; top : 0 ; left :- 100% ; height : 100% ;width : 100% ; background : #5b13b9 ; border-radius : 55px ; transition :all 6s ease-in-out}
 .ch-button .active ::before { animation :layer 6s ease-in-out forwards}
@ keyframes layer {
100%{ left : 0 }
}
.ch-button  .button-content { height : 100% ; width : 100% ; display :flex; align-items :center; justify-content :center; transition :all . 2s ease; transition-delay :. 2s }
 .ch-button .active  .button-content { transform : translateY (60px)}
 .ch-button  .button-content  i , .ch-button  .button-content  .button-text { color : #fff; font-size : 20px ; font-weight : 500 }
 .ch-button  .button-content  .button-text { font-size : 18px ; margin-left : 8px }
 /* ]]> */ </ style >

And add the latest font awesome library:

< link  href = 'https://cdn.jsdelivr.net/gh/hung1001/font-awesome-pro-v6@18657a9/css/all.min.css'  rel = 'stylesheet'  type = 'text/css' / >

Finally, add this JavaScript to your website/blog:

<script> //<![CDATA[ 
      const chbutton = document .querySelector( ".ch-button" ),
          _link = document .querySelector( '.button-text' );
    if (_link) {

    }
    chbutton.addEventListener( "click" , () =>{
      chbutton.classList.add( "active" );
      chbutton.style.pointerEvents = "none" ;
      setTimeout( () => {
         let _target = _link.getAttribute( 'data-link' );
         console .log(_target);
        chbutton.classList.remove( "active" );
        chbutton.querySelector( "i" ).classList.replace( "fa-cloud-arrow-down" , "fa-check" );
        chbutton.querySelector( ".button-text" ).innerText = "Completed!" ;
        setTimeout( () => {
         window .open(_target, '_blank' );
        setTimeout( () => {
  		chbutton.querySelector( "i" ).classList.replace( "fa-check" , "fa-cloud-arrow-down" )
        chbutton.querySelector( ".button-text" ).innerText = "Download" ;
        chbutton.style.pointerEvents = "auto" ;
         }, 2000 );
          }, 1000 );
      }, 6000 );
    });
//]]></script>

Accomplished!

Epilogue

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!