Download Button With Countdown Timer Javascript | Add Timer Download Button In Html







Download Button With Countdown Timer Javascript |  Add Timer Download Button In Html

Welcome🎉 to Code With Random blog. In this blog, we learn how we create a Download Button With Countdown Timer Javascript. We use HTML, Css, and javascript for this Download Button With Countdown Timer Javascript. I hope you enjoy our blog so let’s start with a basic HTML structure for the Download Button With Countdown Timer Javascript.

HTML Code

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />  
<div class="download-container">
<a href="#" class="download-btn">Download files <i class="fas fa-download"></i></a>
<div class="countdown"></div>
<div class="pleaseWait-text">Please wait ...</div>
<div class="manualDownload-text">
If the download didn't start automatically, <a href="#" class="manualDownload-link" target="_top">click here</a>
</div>
</div>

There is all the HTML code for the Download Button With Countdown Timer Javascript. Now, you can see an output with download Button With Countdown Timer Javascript then we write javascript for Download Button With Countdown Timer Javascript.

output

Download Button With Countdown Timer Javascript |  Add Timer Download Button In Html

CSS code

 @import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");  
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
.download-container {
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 0 0.5rem;
}
.download-btn {
background: #4285f4;
color: #fff;
text-decoration: none;
width: 260px;
padding: 18px 0;
text-align: center;
font-size: 1.3rem;
font-weight: 400;
border-radius: 5px;
box-shadow: 0 5px 25px rgba(1, 1, 1, 0.15);
}
.download-btn:hover {
background: #2345f4;
}
.download-btn i {
margin-left: 5px;
}
.countdown {
margin-bottom: 20px;
font-size: 1.5rem;
font-weight: 700;
}
.countdown span {
color: #0693f6;
font-size: 1.5em;
font-weight: 800;
}
.pleaseWait-text,
.manualDownload-text {
font-size: 1.1rem;
font-weight: 600;
display: none;
}
.manualDownload-link {
text-decoration: none;
color: #0693f6;
font-weight: 800;
}

Css Updated output

Download Button With Countdown Timer Javascript |  Add Timer Download Button In Html

Javascript code

 const download = 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;
download.addEventListener('click', () => {
download.style.display = "none";
countdown.innerHTML = `Download will begin automatically in <span>${timeLeft}</span> seconds`;
var downloadTimer = setInterval(function timeCount() {
timeLeft--;
countdown.innerHTML = `Download will begin automatically in <span>${timeLeft}</span> seconds`;
if (timeLeft <= 0) {
clearInterval(downloadTimer);
pleaseWaitText.style.display = "block";
let download_href = "https://drive.google.com/file/d/11v_l0nZ7ha2H-S2KP1nFcZQA1OS6PrXe/view?usp=sharing";
window.location.href = download_href;
manualDownloadLink.href = download_href;
setTimeout(() => {
pleaseWaitText.style.display = "none";
manualDownloadText.style.display = "block";
}, 1000);
}
}, 1000);
});

Final output

Download Button With Countdown Timer Javascript |  Add Timer Download Button In Html

Download Button With Countdown Timer Javascript |  Add Timer Download Button In Html


Download Button With Countdown Timer Javascript |  Add Timer Download Button In Html


Here is our updated output with javascriptHope you like the Download Button With Countdown Timer Javascript. you can see the output video and project screenshots. See our other blogs and gain knowledge in front-end development. Thank you 🙏💕!

In this post, we learn how to create a Download Button With Countdown Timer Javascript using simple HTML & CSS, and javascript. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning. 

Written by – Code With Random/Anki 

Code by – Teja Devisetti

Share on:

Leave a Comment