تركيب زر تحميل مع شريط التقدم في قالب بلوجر

<style>

/* <![CDATA[ */

.ch-button{position:relative;margin:auto auto 0.9375rem;padding:15px;width:40%;min-width:300px;max-width:50%;background:#2051DA;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:20px;width:40%;min-width:300px;max-width:50%;padding:10px}

.ch-button::before{content:"";position:absolute;top:0;left:-100%;height:100%;width:100%;background:#FC9F4B;background-image:linear-gradient(-45deg,rgba(255,255,255,0.125) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.125) 50%,rgba(255,255,255,0.125) 75%,transparent 75%,transparent);background-size:435px 35px;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 svg,.ch-button .button-content .button-text{color:#fff;font-size:20px;font-weight:500}

.ch-button .button-content .button-text{font-size:18px;margin-right:4px}

.download-icon{width:24px;height:24px}

.check-icon{width:24px;height:24px;display:none}

/* ]]> */

</style>

<script>

//<![CDATA[

const chbutton = document.querySelector(".ch-button");

const _link = document.querySelector('.button-text');

chbutton.addEventListener("click", () => {

  chbutton.classList.add("active");

  chbutton.style.pointerEvents = "none";

  

  setTimeout(() => {

    let _target = _link.getAttribute('data-link');

    chbutton.classList.remove("active");

    

    document.querySelector('.download-icon').style.display = 'none';

    

    const checkIcon = document.createElement('svg');

    checkIcon.classList.add('check-icon');

    checkIcon.setAttribute('viewBox', '0 0 24 24');

    checkIcon.setAttribute('width', '24');

    checkIcon.setAttribute('height', '24');

    checkIcon.innerHTML = '<path fill="white" d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z"/>';

    document.querySelector('.button-content').prepend(checkIcon);

    checkIcon.style.display = 'block';

    

    chbutton.querySelector(".button-text").innerText = "مكتمل !";

    

    setTimeout(() => {

      window.location.href = _target;

    }, 1000);

    

    setTimeout(() => {

      document.querySelector('.download-icon').style.display = 'block';

      checkIcon.remove();

      chbutton.querySelector(".button-text").innerText = "Download";

      chbutton.style.pointerEvents = "auto";

    }, 3000);

  }, 6000);

});

//]]>

</script>

ملاحظة

<div class="ch-button">

  <div class="button-content">

    <svg class="download-icon" viewBox="0 0 24 24" width="24" height="24">

      <path fill="white" d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"/>

    </svg>

    <span data-link="ضع الرابط هنا" class="button-text">تحميل</span>

  </div>

</div>