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.
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!
Your email address will not be published.
Enter Image URL / Code Snippets / Quotes / name tag, then click parse button accordingly that you have entered. then copy the parse result and paste it into the comment field.
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óaThay link trong HTML ở phần data-link, code CSS, JavaScript chèn trước thẻ đóng body, còn HTML chèn trong bài viết hoặc ở đâu tuỳ miền trong body.
Trả lời Xóa"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óaChèn trong cặp thẻ head
Trả lời XóaAnh ơi hướng dẫn cụ thể xíu ,chèn vào chỗ nào thẻ nào tụi em ms biết dc ạ
Trả lời Xóa