Hello! Welcome to Action CodeD.
You are looking for Download Button with Progress bar then this post is just for you.
Download Button with Progress bar
Step 1: Login to your Blogger Dashboard
Step 2: In Blogger, create a post or page and insert the code shown below.
Step 3: Copy and paste the following code into Blogger's blog Post.
<div class="ch-button">
<div class="button-content">
<i class="fa-solid fa-cloud-arrow-down"></i>
<span data-link="Enter>
_url_here" class="button-text">Download</span>
</div>
</div>
<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>
<link href='https://cdn.jsdelivr.net/gh/hung1001/font-awesome-pro-v6@18657a9/css/all.min.css' rel='stylesheet' type='text/css'/ >
<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>
Conclusion
I hope you have successfully added your Progress Download Button. If you are facing any problem in any section or you have any question then ask us in the comment box.
Copyright:
