Chia sẻ code Button Download có Progress Bar

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.
Chia sẻ code Button Download có Progress Bar
Please wait 0 seconds...
Scroll Down and click on Go to Link for destination
Congrats! Link is Generated

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.

Chia sẻ code Button Download có Progress Bar

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/[email protected]/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!

0/5
0 ratings
5
4
3
2
1
Có những thứ luôn quẩn quanh cuộc đời bạn và đôi lúc không có lời giải thích, liệu rằng đó có phải là duyên số?!

4 Nhận xét

  • Chèn ảnh bằng cách dán trực tiếp link ảnh | Tool upload ảnh
  • Chèn video Youtube bằng cách dán trực tiếp link video
  • Chèn code theo mẫu [pre]code[/pre]. Lưu ý: mã hóa code trước khi bình luận

    1. Tài Dino TV
      3/03/2022 01:36:00 CH

      K có hướng dẫn chi tiết hơn hả bạn, như thay link download ở đâu cách chỉnh thời gian ??? Chèn trước hoặc sau thẻ gì?

      Trả lời Xóa
    2. Ngô Quốc Kha
      3/04/2022 11:20:00 SA

      "Và chèn thêm thư viên font awesome mới nhất:" là chèn mã này ở đâu ấy nhỉ?

      Trả lời Xóa
    Mới hơn Cũ hơn

    Maybe You Like

    Xin vui lòng xác nhận đồng ý nhận tin từ NLD Blog