Download Box with Countdown Timer

DEMO

Radhey.png Image 85.09KB 720×919 .png

Past this HTML Code in your posts

<div class='dldCo' id='download1'>

  <div class='dldBx'>

    <div class='dldTp'>

      <div class='dldIm' data-text='.png' style='background-image:url(https://i.pinimg.com/736x/0d/59/ea/0d59ea931c917372f4c3e9729ce459f6.jpg)'>

        <svg class='dldSv' viewBox='0 0 34 34'>

          <circle class='b' cx='17' cy='17' r='15.92' />

          <circle class='c dldPg' cx='17' cy='17' r='15.92' />

        </svg>

      </div>

      <div class='dldIn'>

        <span data-text='Name'>Radhey.png</span>

        <span data-text='Category'>Image</span>

        <span data-text='Size'>85.09KB</span>

        <span data-text='Resolution'>720×919</span>

        <span data-text='Extension'>.png</span>

      </div>

    </div>

    <button onclick='download("#", "10", "false", "#download1")' class='dldBt dldDl'><svg viewBox='0 0 24 24'><polyline points='8 17 12 21 16 17'/><line x1='12' x2='12' y1='12' y2='21'/><path d='M20.88 18.09A5 5 0 0 0 18 9h-1.26A8 8 0 1 0 3 16.29'/></svg></button>

    <button class='dldBt dldRt'><svg viewBox='0 0 24 24'><polyline points='23 4 23 10 17 10'/><path d='M20.49 15a9 9 0 1 1-2.12-9.36L23 10'/></svg></button>

  </div>

  <div class='dldSl'>

    <div class='dldMe'></div>

  </div>

</div>

Past this Css code before b:skin[[

.download1 {

  background: red;

}

.dldCo{

  --boxC : #08102b; /* Font Color */

  --boxBg : #fffdfc; /* Container Background */

  --fontF : inherit; /* Font Family */

  --svgS : #fffdfc; /* Button SVG Stroke */

  --btnBg : #482dff; /* Button Background */

  --darkC : #fffdfc; /* Dark Font Color */

  --darkBt : #e91e63; /* Dark Button Background */

  --darkBa: #2d2d30; /* Dark Background Alt */

  --darkBs: #252526 ; /* Dark Background Sec */

}

.dldCo{-webkit-tap-highlight-color:transparent;

  position:relative;width:100%;max-width:480px;margin:30px 0;color:var(--boxC);font-family:var(--fontF);transition:margin .6s ease;-webkit-transition:margin .6s ease}

.dldBx{position:relative;z-index:2;background:var(--boxBg);width:100%;padding:15px;display:flex;flex-direction:column;font-size:14px;border-radius:10px;box-shadow:0 0 35px rgba(0,0,0,.09)}

.dldTp{display:flex;flex-direction:row} .dldIm{position:relative;flex-shrink:0;display:flex;align-items:center;justify-content:center;width:60px;height:60px;padding:10px;margin-right:15px;background:rgba(0,0,0,.08);border-radius:6px;transition:all .4s ease;-webkit-transition:all .4s ease} .dldIm::before{content:attr(data-text);opacity:.7} .dldIm[style]:not([style='']){width:100px;height:100px;background-size:cover;background-position:center;background-repeat:no-repeat;box-shadow:0 0 10px rgba(0,0,0,.1)} .dldIm[style]:not([style=''])::before{display:none}

.dldSv{opacity:0;

 position:absolute;

 width:calc(100% + 12px);

 height:calc(100% + 12px);

top:-6px;

 bottom:-6px;

 right:-6px;

 left:-6px;

 -webkit-transform:rotate(-90deg);

  -ms-transform:rotate(-90deg);

  transform:rotate(-90deg);

  stroke-width:1.5;

  transition:all .5s ease;

  -webkit-transition:all .5s ease} .dldIm[style]:not([style='']) .dldSv{width:calc(100% + 20px);height:calc(100% + 20px);top:-10px;bottom:-10px;right:-10px;left:-10px} .dldSv .b{fill:none;stroke:#e6e6e6;opacity:.9} .dldSv .c{fill:none;stroke:var(--btnBg);stroke-dasharray:100 100;stroke-dashoffset:100;stroke-linecap:round;transition:all .5s ease;-webkit-transition:all .5s ease}

.dldIn{flex-grow:1;width:calc(100% - 115px)} .dldIn >*{line-height:20px;font-size:14px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .dldIn >*::before{content:attr(data-text) ': ';opacity:.8}

.dldBt{background:var(--btnBg);position:absolute;width:40px;height:40px;bottom:-20px;right:20px;outline:none;border:none;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 0 15px rgba(0,0,0,.09);transition:all .3s ease;-webkit-transition:all .3s ease;cursor:pointer} .dldBt:hover{-webkit-transform:scale(1.03);-ms-transform:scale(1.03);transform:scale(1.03)} .dldBt svg{width:24px;height:24px;fill:none;stroke:var(--svgS);stroke-linecap:round;stroke-linejoin:round;stroke-width:1.2} .dldBt.dldDl{visibility:visible;opacity:1} .dldBt.dldRt{visibility:hidden;opacity:0;bottom:-40px}

.dldSl{z-index:1;position:absolute;bottom:0;height:60px;width:100%;background:var(--boxBg);border-radius:0 0 10px 10px;transition:all .6s ease;-webkit-transition:all .6s ease} .dldMe{position: absolute;width:100%;height:40px;bottom:0;display:flex;align-items:center;justify-content:center;font-size:14px} .dldMe span{color:var(--btnBg);font-size:18px;font-weight:600;margin:0 5px}

.dldCo.dldAlt{margin:30px 0 70px} .dldCo.dldAlt .dldIm{-webkit-transform:scale(.8);-ms-transform:scale(.8);transform:scale(.8);border-radius:50%} .dldCo.dldAlt .dldSv{opacity:1} .dldCo.dldAlt .dldDl{visibility:hidden;opacity:0;bottom:-40px} .dldCo.dldRty .dldRt{visibility:visible;opacity:1;bottom:-20px} .dldCo.dldAlt .dldSl{bottom:-40px;box-shadow:0 0 35px rgba(0,0,0,.09)}

.darkMode .dldCo{color:var(--darkC)} .darkMode .dldBx{background:var(--darkBs)} .darkMode .dldIm, .darkMode .dldSl{background:var(--darkBa)} .darkMode .dldSv .b{stroke:#404045} .darkMode .dldSv .c{stroke:var(--darkBt)} .darkMode .dldBt{background:var(--darkBt)} .darkMode .dldMe span{color:var(--darkBt)} 

Past this Js code before body

<script>

  /*<![CDATA[*/

  /* Countdown Download Script by Fineshop Design */

  function download(link, time, newtab, id){

    var dldCo = document.querySelector(id),

        dldMe = document.querySelector(id + ' .dldMe'),

        dldPg = document.querySelector(id + ' .dldPg'),

        dldDl = document.querySelector(id + ' .dldDl'),

        dldRt = document.querySelector(id + ' .dldRt'),

        dldLf = time;

    

    dldMe.innerHTML = 'Starting Download in <span>' + dldLf + '</span> seconds...';

    dldCo.classList.add('dldAlt');

    

    var downloadTimer = setInterval(function timeCount(){

        dldLf -= 1;

        dldMe.innerHTML = 'Starting Download in <span>' + dldLf + '</span> seconds...';

        dldPg.style.strokeDashoffset = Math.floor((dldLf / time) * 100);

      if(dldLf <= 0){

        clearInterval(downloadTimer);

        dldMe.innerHTML = 'Please wait...';

        

        if (newtab == 'true'){

          window.open(link, '_blank');

        } else {

          window.location.href = link;

        };

        

        dldRt.onclick = function (){

          if (newtab == 'true'){

            window.open(link, '_blank');

          } else {

            window.location.href = link;

          }

        };

        

        setTimeout(() => {

          dldCo.classList.remove('dldAlt');

          dldCo.classList.add('dldRty');

        }, 4000);

      }

    }, 1000);

  };

</script>