How To Create Download Button with Animated Download Timer Script Using HTML,CSS, And Javascript
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
Next Copy CSS Code on the Below and Paste the css script on above the
</sript> or ]]></b:skin> tag.
OR add above below mentioned tag
Next Copy the Javascript on This Blog. and, Paste above the
</body> or </script> Tag.
OR
Next Save the All Changes on your Blog.
Now create new post or open the previous post. and copy the below Html Script.
Next, your post view to html mode.
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"> </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(".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 = 11;
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);
});
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
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"> </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
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...