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.
DemoYou 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.
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 latest font awesome library:
Second, add the HTML code to the display position:
Next add the following CSS code:
And add the following script code in your blog:
Finally, add this JavaScript to your website/blog:
Accomplished!
<link href='https://cdn.jsdelivr.net/gh/MubassirUhban/TrickPk@main/all.min.css' rel='stylesheet' type='text/css'/>
<div class="trickpk-button"> <div class="button-content"> <i class="fa-solid fa-cloud-arrow-down"></i> <span data-link="https://www.trickpk.com/" class="button-text">Download</span> </div> </div>
<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} .trickpk-button.active{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} .trickpk-button.active::before{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} .trickpk-button.active .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>
<script>//<![CDATA[ const trickpkbutton = document.querySelector(".trickpk-button"), _link = document.querySelector('.button-text'); if (_link) { } trickpkbutton.addEventListener("click", () =>{ trickpkbutton.classList.add("active"); trickpkbutton.style.pointerEvents = "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(()=>{ window.open(_target, '_blank'); setTimeout(()=>{ trickpkbutton.querySelector("i").classList.replace("fa-trickpkeck", "fa-cloud-arrow-down") trickpkbutton.querySelector(".button-text").innerText = "Download"; trickpkbutton.style.pointerEvents = "auto"; },2000); },1000); },8000); }); //]]></script>
Outcomes
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!