Join our Telegram and Youtube Channels

How To Create Download Button with Animated Download Timer Script Using HTML,CSS, And Javascript

Download Button with Animated Download Timer Script

In This Article, we are see how to create Download Button with Countdown Download Timer Script Function with amazing CSS animated style and Progress bar on Using HTML,CSS, and JavaScript. Your Searching for Download Timer Script for your Blogger and WordPress or other type of Projects. Now your Searching was getting ended. This is perfect Result for You. Now see Guidelines for how to add this script on your blogger and WordPress websites.

Pros and Cons - Download Button with Animated Download Timer Script

This Download Button with Animated Download Timer Script some advantages and Disadvantages

Pros

  • This script responsive for all platforms.
  • Timing function added.
  • Progress bar added.
  • Animated Style Applied.
  • Increase your Revenue.
  • Attract the Some Viewers.
  • This script is free.
  • Best guide for beginners

Cons

  • Your one script for one page.
  • Not support multiple count of Download Button.
  • Some user not like this Timing Function.

How to Add Download Button with Animated Download timer Script on Blogger

First Make A Backup on your Website.

Go to the Theme Section and Click the Dropdown arrow and Click Edit HTML Option

Download Button with Animated Download Timer Script
Download Button with Animated Download Timer Script
Download Button with Animated Download Timer Script

Next Copy CSS Code on the Below and Paste the css script on above the </sript> or ]]></b:skin> tag.

Download Button with Animated Download Timer Script

OR add above below mentioned tag

Download Button with Animated Download Timer Script

Next Copy the Javascript on This Blog. and, Paste above the </body> or </script> Tag.

Download Button with Animated Download Timer Script

OR

Download Button with Animated Download Timer Script

Next Save the All Changes on your Blog.

Download Button with Animated Download Timer Script

Now create new post or open the previous post. and copy the below Html Script.

Next, your post view to html mode.

Download Button with Animated Download Timer Script

And, paste HTML Script on your post and Publish it.

Thats all

Download Button with Animated Download Timer Source Codes

HTML CODE

      
      <!--Download timer script -  Created by Pixabin.com -->
<div class="download-container">
   <button type="button" class="download-btn">Create Download Link</button>
   <!-- <a href="#" class="download-btn">Create Download Link</a> -->      
   <div class="countdown"></div>
   <div class="pleaseWait-text">
      <div class="progress">
         <span class="progress-text truncate">Creating Download Link...</span>
         <div class="progress-status">&nbsp;</div>
      </div>
   </div>
   <div class="manualDownload-text">
      <a href="https://www.pixabin.com" rel="dofollow">
      <button class="download-btn-now" type="submit" form="mkdir">Click to Download</button>
      </a>
   </div>
</div>
  

CSS Codes

      
.download-btn,.download-btn-now{color:#fff;width:290px;padding:8px 0;text-align:center;font-size:14px;font-weight:400;border-radius:5px;box-shadow:0 5px 25px rgba(1 1 1 / 15%);transition:background .3s;text-transform:uppercase;position:relative;margin-top:30px;text-decoration:none}.download-container i{margin-right:8px}
.download-container{position:relative;display:flex;flex-direction:column;text-align:center;align-items:center;justify-content:center}.download-btn{background:#4285f4}.download-btn-now{display:inline-block;background:#32373c}.download-btn:hover{background:#2874f3}
.countdown{font-size:18px;font-weight:500;margin-bottom:10px;margin-top:30px}.countdown span{color:#0693f6;font-size:1.5em;font-weight:800}.manualDownload-text,.pleaseWait-text{font-size:14px;font-weight:600;display:none}.manualDownload-link{color:#0693f6;font-weight:400;text-decoration:none}button{background-color:transparent;border-color:transparent;border-style:hidden}
.load-container{overflow-y:scroll;scroll-behavior:smooth}.progress,.truncate{display:block;overflow:hidden}.sub{font-size:10px;color:#000}#download,#download-loading{height:50px}.progress{background-color:#d4eaf9;position:relative;height:36px;width:260px;border-radius:20px;margin:.5rem 0 1rem}.progress-text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff;font-size:13px}.truncate{white-space:nowrap;text-overflow:ellipsis}
.progress-status{height:100%;background-color:#1496e7;animation:4s ease-out progress-status}@-webkit-keyframes progress-status{from{width:0%}to{width:100%}}.loading{padding:8px;min-width:203px;position:relative;display:inline-block;background:conic-gradient(from var(--angle),#4a90e2 0deg 90deg,#eff1f4 90deg 360deg);border-radius:3px;animation:3s linear infinite rotate;color:rgba(55,57,76,.3);z-index:1;font-family:sans-serif;font-size:12px}
.loading::before{content:"";background:#fff;border-radius:2px;position:absolute;top:1px;bottom:1px;left:1px;right:1px;z-index:-1}@keyframes rotate{to{--angle:360deg}}@property --angle{syntax:"<angle>";initial-value:0deg;inherits:false}.loadcontainer{display:flex;align-items:center;justify-content:center;width:100%;height:100%}
  

Javascript codes

For Blogger
 
  const downloadBtn = document.querySelector(&quot;.download-btn&quot;);
const countdown = document.querySelector(&quot;.countdown&quot;);
const pleaseWaitText = document.querySelector(&quot;.pleaseWait-text&quot;);
const manualDownloadText = document.querySelector(&quot;.manualDownload-text&quot;);
const manualDownloadLink = document.querySelector(&quot;.manualDownload-link&quot;);
var timeLeft = 11;
downloadBtn.addEventListener(&quot;click&quot;, () =&gt; {
    downloadBtn.style.display = &quot;none&quot;;
    countdown.innerHTML = &quot;<div class='loadcontainer'><div class='loading'>Please wait <span>&quot; + timeLeft + &quot;</span> seconds. </div> </div> <br/>&quot;;
    var downloadTimer = setInterval(function timeCount() {
        timeLeft -= 1;
        countdown.innerHTML = &quot;<div class='loadcontainer'><div class='loading'>Please wait <span>&quot; + timeLeft + &quot;</span> seconds. </div> </div> <br/> <div class='sub'>Please Wait 10 Seconds To Get Your Download Link</div>&quot;;
        if (timeLeft &lt;= 0) {
            clearInterval(downloadTimer);
            pleaseWaitText.style.display = &quot;block&quot;;
            countdown.style.display = &quot;none&quot;;
            setTimeout(() =&gt; {
                countdown.style.display = &quot;none&quot;;
                pleaseWaitText.style.display = &quot;none&quot;;
                manualDownloadText.style.display = &quot;block&quot;;
            }, 4000);
        }
    }, 1000);
});
  
For WordPress
//Download Timer Function - Pixabin Official//
    const downloadBtn = document.querySelector(".download-btn");
    const countdown = document.querySelector(".countdown");
    const pleaseWaitText = document.querySelector(".pleaseWait-text");
    const manualDownloadText = document.querySelector(".manualDownload-text");
    const manualDownloadLink = document.querySelector(".manualDownload-link");
    var timeLeft = 10;
    downloadBtn.addEventListener("click", () => {
      downloadBtn.style.display = "none";
      countdown.innerHTML = "<div class='loadcontainer'><div class='loading'>Please wait <span>" + timeLeft + "</span> seconds. </div> </div> <br/>";
      var downloadTimer = setInterval(function timeCount(){
        timeLeft -= 1;
        countdown.innerHTML = "<div class='loadcontainer'><div class='loading'>Please wait <span>" + timeLeft + "</span> seconds.</div></div><br/><div class='sub'>Please Wait 10 Seconds To Get Your Download Link</div>";

        if(timeLeft <= 0){
          clearInterval(downloadTimer);
          pleaseWaitText.style.display = "block";
          countdown.style.display = "none";
          setTimeout(() => {
            countdown.style.display = "none";
            pleaseWaitText.style.display = "none";
            manualDownloadText.style.display = "block";
          }, 4000);
        }
      }, 1000);
    });

 

Simple way to Apply this Download Button with Animated Download Timer Script on your blogger or Wordpress Blog

Simple way for Blogger

First of all copy the below script on the device.

Now open your blogger dashboard

And create new post on the your blog

Convert to Compose mode to Html mode

How To Create Download Button with Animated Download Timer Script Using HTML,CSS, And Javascript

Now paste the copied script on your our blog. and, pulish the Article.

Simple way for Wordpress

Copy the below Source File on the our pixabin Blog

Open your Wordpress Dashboard

Create the new post or open previous Post or page

Now select the wanted place on the blog post and click the (+) plus icon and add custom html element

And Paste Copied Scripts on custom HTML block.

That's all

   
  <!--Download timer script -  Created by Pixabin.com -->
<div class="download-container">
   <button type="button" class="download-btn">Create Download Link</button>
   <!-- <a href="#" class="download-btn">Create Download Link</a> -->      
   <div class="countdown"></div>
   <div class="pleaseWait-text">
      <div class="progress">
         <span class="progress-text truncate">Creating Download Link...</span>
         <div class="progress-status">&nbsp;</div>
      </div>
   </div>
   <div class="manualDownload-text">
      <a href="https://www.pixabin.com" rel="dofollow">
      <button class="download-btn-now" type="submit" form="mkdir">Click to Download</button>
      </a>
   </div>
</div>

<script type="text/javascript">
    const downloadBtn=document.querySelector(".download-btn"),countdown=document.querySelector(".countdown"),pleaseWaitText=document.querySelector(".pleaseWait-text"),manualDownloadText=document.querySelector(".manualDownload-text"),manualDownloadLink=document.querySelector(".manualDownload-link");var timeLeft=10;downloadBtn.addEventListener("click",()=>{downloadBtn.style.display="none",countdown.innerHTML="<div class='loadcontainer'><div class='loading'>Please wait <span>"+timeLeft+"</span> seconds. </div> </div> <br/>";var e=setInterval(function n(){timeLeft-=1,countdown.innerHTML="<div class='loadcontainer'><div class='loading'>Please wait <span>"+timeLeft+"</span> seconds.</div></div><br/><div class='sub'>Please Wait 10 Seconds To Get Your Download Link</div>",timeLeft<=0&&(clearInterval(e),pleaseWaitText.style.display="block",countdown.style.display="none",setTimeout(()=>{countdown.style.display="none",pleaseWaitText.style.display="none",manualDownloadText.style.display="block"},4e3))},1e3)});
    </script>

<style>
.download-btn,.download-btn-now{color:#fff;width:290px;padding:8px 0;text-align:center;font-size:14px;font-weight:400;border-radius:5px;box-shadow:0 5px 25px rgba(1 1 1 / 15%);transition:background .3s;text-transform:uppercase;position:relative;margin-top:30px;text-decoration:none}.download-container i{margin-right:8px}
.download-container{position:relative;display:flex;flex-direction:column;text-align:center;align-items:center;justify-content:center}.download-btn{background:#4285f4}.download-btn-now{display:inline-block;background:#32373c}.download-btn:hover{background:#2874f3}
.countdown{font-size:18px;font-weight:500;margin-bottom:10px;margin-top:30px}.countdown span{color:#0693f6;font-size:1.5em;font-weight:800}.manualDownload-text,.pleaseWait-text{font-size:14px;font-weight:600;display:none}.manualDownload-link{color:#0693f6;font-weight:400;text-decoration:none}button{background-color:transparent;border-color:transparent;border-style:hidden}
.load-container{overflow-y:scroll;scroll-behavior:smooth}.progress,.truncate{display:block;overflow:hidden}.sub{font-size:10px;color:#000}#download,#download-loading{height:50px}.progress{background-color:#d4eaf9;position:relative;height:36px;width:260px;border-radius:20px;margin:.5rem 0 1rem}.progress-text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff;font-size:13px}.truncate{white-space:nowrap;text-overflow:ellipsis}
.progress-status{height:100%;background-color:#1496e7;animation:4s ease-out progress-status}@-webkit-keyframes progress-status{from{width:0%}to{width:100%}}.loading{padding:8px;min-width:203px;position:relative;display:inline-block;background:conic-gradient(from var(--angle),#4a90e2 0deg 90deg,#eff1f4 90deg 360deg);border-radius:3px;animation:3s linear infinite rotate;color:rgba(55,57,76,.3);z-index:1;font-family:sans-serif;font-size:12px}
.loading::before{content:"";background:#fff;border-radius:2px;position:absolute;top:1px;bottom:1px;left:1px;right:1px;z-index:-1}@keyframes rotate{to{--angle:360deg}}@property --angle{syntax:"<angle>";initial-value:0deg;inherits:false}.loadcontainer{display:flex;align-items:center;justify-content:center;width:100%;height:100%}

</style>
  

Demo - Download Timer Script with Download Button

Creating Download Link...
 

Video Guidelines

Final Words

We are hope this article How To Create Download Button with Animated Download Timer Script Using HTML,CSS, And Javascript was very helpful to you. if you want more information like this article. Please share with your friends and share this article on the your social media. And please follow social media profiles.

Thank you for reading...

Related Posts

Post a Comment

Table of Contents