Download Button with Countdown Timer Using Html CSS Javascript | Free Source Codes

Download Button with Countdown Timer Using Html CSS Javascript | Free Source Codes

Hi Friends, Welcome to Pixabin Blog. In This Coding Guide Article, We are guided To How To Make A Countdown Timer With Download Button. We are using HTML, CSS, And Javascript Coding Scripts For Create This Download Timer With Countdown Timer.

I Hope You Enjoy Our Pexario Blog. So, Let’s Start With A Basic Html Structure Designing For The Countdown Timer With Download Button Source Codes.

Let's see some Countdown timer with Download Button Source codes or Download Timer Source Codes in the following Sections of this Article.

Download Button with Countdown Timer Model -1

	.timer-button {
		background-color: #4CAF50;
		border: none;
		color: white;
		padding: 15px 32px;
		text-align: center;
		text-decoration: none;
		display: inline-block;
		border-radius: 10px;
		font-size: 16px;
		margin: 4px 2px;
		cursor: pointer;
		-webkit-transition-duration: 0.4s;
		transition-duration: 0.4s;
<div dir="ltr" style="text-align: left;" trbidi="on">
		<span id="countdown">You have to wait 15 seconds.</span></center>
	<br />
	<a class="timer-button" href="" id="download_link" style="display: none;">Download Now</a>
	<noscript>JavaScript needs to be enabled in order to be able to download.</noscript>
<script type="application/javascript">
	(function() {
		var message = "%d seconds before download link appears";
		// seconds before download link becomes visible
		var count = 15;
		var countdown_element = document.getElementById("countdown");
		var download_link = document.getElementById("download_link");
		var timer = setInterval(function() {
			// if countdown equals 0, the next condition will evaluate to false and the else-construct will be executed
			if (count) {
				// display text
				countdown_element.innerHTML = "You have to wait %d seconds.".replace("%d", count);
				// decrease counter
			} else {
				// stop timer
				// hide countdown = "none";
				// show download link = "";
		}, 1000);

Demo - Download Button with Countdown Timer Model -1

You have to wait 100 seconds.

Download Button with Countdown Timer Model -2

  .button-2,Cnt-Timer{display:inline-flex;font-family:var(--fontB)}Cnt-Timer{font-size:13px;opacity:.8;align-items:center}.button-2{align-items:center;margin:10px 0;padding:12px 15px;outline:0;border:0;border-radius:3px;line-height:20px;color:#fffdfc;background:#000000;font-size:14px;white-space:nowrap;overflow:hidden;max-width:320px}
<div style="text-align: center;"><a class="button-2" id="Cnt-Timer-TD">Click here</a> </div>
  <div id="element-show" target="_blank">
 <a class="button-2" rel="nofollow" href="">Download Now</a>
  </div> </center>

    <script>var id,counter=10,downloadButton=document.getElementById("element-show"),newElement=document.createElement("p");function startDownload(){"none",id=setInterval(function(){--counter<0?(newElement.parentNode.replaceChild(downloadButton,newElement),clearInterval(id)):newElement.innerHTML="<center><strong>Please wait <span>"+counter.toString()+"</span> seconds</strong><p/><Cnt-Timer><svg viewBox='0 0 60 60'style='width: 30px; height: auto;' x='0px' y='0px'><path d='M25.251,6.461c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615V6.461z'><animateTransform attributeName='transform' attributeType='xml' dur='0.6s' from='0 25 25' repeatCount='indefinite' to='360 25 25' type='rotate'></animateTransform></path></svg> Generating... Please Wait!</Cnt-Timer></center>"},1e3)}newElement.innerHTML="<span></span>",downloadButton.parentNode.replaceChild(newElement,downloadButton);var clickbtn=document.getElementById("Cnt-Timer-TD");clickbtn.onclick=startDownload;</script>

Demo - Download Button with Countdown Timer Model -2

Download Button with Countdown Timer Model -3

<!-- css -->
<style>.container-3{position: relative; display: flex; align-items: center; justify-content: center; flex-direction: column;}.starter-btn{position: relative; width: 260px; background-color: #40e7b6; color: #fff; padding: 18px 0; text-align: center; font-size: 1.3rem; font-weight: 400; border-radius: 5px; box-shadow: 0 5px 25px rgba(64, 232, 182, 0.5);}.starter-btn:hover{background-color: #06e1a1;}.countdown-3{margin-bottom: 20px; font-size: 1.5rem; font-weight: 700;}.countdown-3 span{color: #40e7b6; font-size: 1.5rem; font-weight: 800;}.waiting-text-3{font-size: 1.1rem; font-weight: 600; display: none;}.download-text-3{font-size: 1.1rem; font-weight: 600; display: none;}.download-text-3 .download-link-3{color: #40e7b6; font-weight: 800;}</style>

<!-- HTML -->
<div class="container-3"> <a class="starter-btn">Download Files</a> <div class="countdown-3"> </div><div class="waiting-text-3"> Please Wait.. </div><div class="download-text-3"> If the download did't start automatically, <a href="#" class="download-link-3"> Click Here </a> </div></div>

<!-- Javascript Function -->
  var timeleft=20;const downloadButton=document.querySelector(".starter-btn"),countdown=document.querySelector(".countdown-3"),waitText=document.querySelector(".waiting-text-3"),downloadText=document.querySelector(".download-text-3"),downloadLink=document.querySelector(".download-link-3");downloadButton.addEventListener("click",()=>{"none",countdown.innerHTML="Download will begin automatically in <span>"+timeleft+" </span> seconds.";var t=setInterval(function n(){if(timeleft-=1,countdown.innerHTML="Download will begin automatically in <span>"+timeleft+" </span> seconds.",timeleft<=0){clearInterval(t),"block";let e="";window.location.href=e,downloadLink.href=e,setTimeout(()=>{"none","block"},4e3)}},1e3)});

Demo - Download Button with Countdown Timer Model -3

Download Files
Please Wait..
If the download did't start automatically, Click Here

Final Words

We hope this Download Button with Countdown Timer Source Codes is very helpful to you. If you facing any problems with the above source codes please Comment in the Below section. and,If you like these Source codes please follow our blog on google News and Subscribe to our Youtube Channel. Thank you for Reading !!!.

Post a Comment