Chia sẻ code Button Download có Progress Bar - Tôi Share

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. Và Blog mình cũng có nhiều bài viết share code về JavaScript cũng như HTML và CSS bài gần đây nhất Chia sẻ code, template thư viện ảnh với Lightbox cho Blogspot các bạn có thể truy cập để xem.

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.

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>

Tiếp theo thêm code CSS sau:

<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>

Và chèn thêm thư viên font awesome mới nhất:

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

Cuối cùng, chèn đoạn JavaScript này vào tiếp website/blog của bạn:

<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>

Xong!

Lời kết

Đây là tất cả source code để bạn có thể thêm Button Download có Progress Bar trên website/blog của mình bằng cách sử dụng HTML, CSS và JavaScript. Nếu trong quá trình thực hiện gặp lỗi hay code không hoạt động các bạn có thể comment xuống phía dưới mình sẽ phản hồi và giúp đỡ bạn sớm nhất!