Chào các bạn, hôm nay mình sẽ chia sẻ cho các bạn code cho Button Download có Progress Bar cực đẹp. Code sử dụng HTML, CSS và JavaScript.
Button Download có Progress Bar là animation xuất hiện sau khi nhấp và hiển thị rằng đường link đang được tải. Hiện tại, hiệu ứng này đang được sử dụng khá nhiều vì nó chiếm ít dung lượng trên trang web và trông rất đẹp, chuyên nghiệp.
Các bạn có thể xem demo dưới đây, đầu tiên bạn nhìn thấy sẽ là giao diện ban đầu của button và khi bạn nhấp vào nút đó, chiều cao và chiều rộng của nó sẽ được thay đổi thành Progress Bar. Khi Progress Bar hoàn thành tiến trình thì nó sẽ thông báo hoàn tất và chuyển đến link download.
Chia sẻ code Button Download có Progress Bar
Để thêm Button Download có Progress Bar vào Blog hay Website các bạn cần thêm code HTML, CSS và JavaScript sau đây vào Blog/Website của các bạn.Đầu tiên thêm code HTML vào vị trí hiển thị:
<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><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>