Merhaba arkadaşlar bugün sizlerle güzel bir İlerleme Çubuğu olan İndirme Butonu kodunu paylaşacağım. Kod HTML, CSS ve JavaScript kullanır. Ve Blogumda ayrıca JavaScript, HTML ve CSS ile ilgili kod paylaşmak için birçok makale var.En son gönderi Paylaşım kodu, Blogspot için Lightbox ile şablon galerisine erişebilirsiniz.
İndirme Düğmesi, tıkladıktan sonra görünen ve bağlantının yüklendiğini gösteren bir animasyon olan bir İlerleme Çubuğuna sahiptir. Şu anda, bu efekt oldukça fazla kullanılıyor çünkü web sitesinde az yer kaplıyor ve çok güzel ve profesyonel görünüyor.
Aşağıdaki demoyu görebilirsiniz, ilk göreceğiniz şey butonun ilk arayüzü olacak ve o butona tıkladığınızda yüksekliği ve genişliği Progress Bar olarak değişecek. İlerleme Çubuğu işlemi tamamladığında tamamlandığını bildirecek ve indirme bağlantısına gidecektir.
İndirme Düğmesi kodunu İlerleme Çubuğu ile paylaşın
İlerleme Çubuğu ile İndir Düğmesini Blogunuza veya Web Sitenize eklemek için Blogunuza/Web Sitenize aşağıdaki HTML, CSS ve JavaScript kodunu eklemeniz gerekir.
Öncelikle HTML kodunu ekleyin.
<div class="ch-button">
<div class="button-content">
<i class="fa-solid fa-cloud-arrow-down"></i>
<span data-link="LİNK ADRESİ/" class="button-text">Download</span>
</div>
</div>
Şimdi aşağıda ki CSS kodlarını ]]></b:skin> kodunun üzerine gelecek şekilde ekleyin.
<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>
Son olarak JavaScript'i web sitenize/blogunuza ekleyin </body> etiketinin üzerine gelecek şekilde.
<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>
Bütün işlemler bu kadar herkese kolay gelsin.